El objeto de número de entrada en HTML DOM se usa para representar un elemento de entrada HTML con type= “number” . Se puede acceder al
elemento de entrada con type= “number” usando el método getElementById() .
Sintaxis:
- Se utiliza para acceder al objeto de número de entrada.
document.getElementById("id");
- Se utiliza para crear elementos de entrada.
document.createElement("input");
Propiedades del objeto de número de entrada:
Propiedad | Descripción |
---|---|
escribe | Esta propiedad se utiliza para devolver qué tipo de elemento de formulario es el campo de número. |
valor | Esta propiedad se utiliza para establecer o devolver el valor del atributo de valor de un campo numérico. |
autocompletar | Esta propiedad se utiliza para establecer o devolver el valor del atributo de autocompletar de un campo numérico. |
enfoque automático | Esta propiedad se usa para establecer o devolver si un campo numérico debe enfocarse automáticamente cuando se carga la página. |
valor por defecto | Esta propiedad se utiliza para establecer o devolver el valor predeterminado de un campo numérico. |
desactivado | Esta propiedad se usa para establecer o devolver si un campo numérico está deshabilitado o no. |
forma | Esta propiedad se utiliza para devolver una referencia al formulario que contiene el campo numérico. |
lista | Esta propiedad se usa para devolver una referencia a la lista de datos que contiene el campo numérico. |
máximo | Esta propiedad se utiliza para establecer o devolver el valor del atributo máximo de un campo numérico. |
min | Esta propiedad se utiliza para establecer o devolver el valor del atributo min de un campo numérico. |
nombre | Esta propiedad se utiliza para establecer o devolver el valor del atributo de nombre de un campo numérico. |
marcador de posición | Esta propiedad se utiliza para establecer o devolver el valor del atributo de marcador de posición de un campo numérico. |
solo lectura | Esta propiedad se usa para establecer o devolver si el campo numérico es de solo lectura o no. |
requerido | Esta propiedad se utiliza para establecer o devolver si el campo de número debe completarse antes de enviar un formulario. |
paso | Esta propiedad se utiliza para establecer o devolver el valor del atributo de paso de un campo numérico. |
Métodos de objeto de número de entrada:
Método | Descripción |
---|---|
paso abajo() | Este método se utiliza para disminuir el valor del número de entrada en un número específico. |
aumentar() | Este método se utiliza para incrementar el valor del número de entrada en un número específico. |
Seleccione() | Este método se utiliza para seleccionar el contenido de un campo de número de entrada. |
Ejemplo 1:
<!DOCTYPE html> <html> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Input Number Object</h2> <input type="number" id="myNumber" value="10"> <p>Click the button to get the number of the number field.</p> <button onclick="myFunction()"> Click Here! </button> <p id="demo"></p> <script> function myFunction() { // Accessining input value var x = document.getElementById("myNumber").value; document.getElementById( "demo").innerHTML = x; } </script> </body> </html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2:
<!DOCTYPE html> <html> <body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Input Number Object</h2> <p>Click the button to create a Number field.</p> <button onclick="myFunction()">Click Here!</button> <script> function myFunction() { // Creating input element. var x = document.createElement("INPUT"); x.setAttribute("type", "number"); x.setAttribute("value", "5678"); document.body.appendChild(x); } </script> </body> </html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Nota: Los elementos <input> con type=”number” son compatibles con la versión de Internet Explorer 9+ .
Navegadores compatibles:
- Google Chrome
- Mozilla Firefox
- Borde
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por divyatagoel0709 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA