HTML | Objeto de número de entrada DOM

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *