HTML5: ¿tipo de entrada de número que solo toma enteros?

250

Estoy usando el Validador de herramientas jQuery que implementa validaciones HTML5 a través de jQuery. Ha estado funcionando muy bien hasta ahora, excepto por una cosa. En la especificación HTML5, el tipo de entrada "número" puede tener números enteros y números de coma flotante. Esto parece increíblemente miope, ya que solo será un validador útil cuando los campos de la base de datos sean números de punto flotante con signo (para entradas sin signo, tendrá que recurrir a la validación de "patrón" y, por lo tanto, perder características adicionales como arriba y abajo flechas para navegadores que lo soporten). ¿Hay otro tipo de entrada o tal vez un atributo que restringiría la entrada a enteros sin signo? No pude encontrar ninguno, gracias.

EDITAR

Ok, muchachos, agradezco su tiempo y ayuda, pero veo muchas votaciones no merecidas: D. Establecer el paso a 1 no es la respuesta, ya que no restringe la entrada. Todavía puede escribir un número negativo de coma flotante en el cuadro de texto. Además, soy consciente de la validación de patrones (lo mencioné en mi publicación original), pero eso no era parte de la pregunta. Quería saber si HTML5 permitía restringir una entrada de tipo "número" a valores enteros positivos. A esta pregunta, la respuesta, parece, sería "no, no lo hace". No quería usar la validación de patrones porque esto causa algunos inconvenientes al usar la validación de jQuery Tools, pero ahora parece que la especificación no permite una forma más limpia de hacerlo.

jquery html validation jquery-tools JayPea
fuente
3
A partir de 2019, no sé desde cuándo, la numberentrada (al menos en FF / Chrome / Safari) ahora solo acepta enteros por defecto, a menos que establezca un valor explícito para el stepatributo que permita valores decimales; por ejemplo: step="0.01". MDN documentado aquí . En dos mentes acerca de esto porque creo que es un valor predeterminado razonable, pero también un cambio importante (sí, ha afectado algún código que escribí).
Darragh Enright

Respuestas:

326

https://www.w3.org/wiki/HTML/Elements/input/number

Lo mejor que puedes lograr solo con HTML

<input type="number" min="0" step="1"/>
Expandir fragmento

Aurélien Ooms
fuente
66
Probablemente debería establecer mina 1lo que quiera números positivos (y números no no negativos).
Martin Thoma
1
@pwdst Lo secundé. <input type="number" min="0" step="1"/>Es la respuesta más correcta a la pregunta. De todos modos, ¿qué sentido tiene tener ambos step="1"y pattern="\d+"? No puedo escribir números de coma flotante en ninguno de los casos.
Danish Ashfaq
27
Esto no funcionó para mí en la última versión de Chrome. No permite que se escriban letras, pero sí permite insertar caracteres especiales.
Malavos
2
¿Por qué puedo escribir e?
Grant Sun
44
@grantsun para números exponenciales, por ejemplo, 10e20.
sn3ll
181

Establezca el stepatributo en 1:

<input type="number" step="1" />

Esto parece un poco defectuoso en Chrome en este momento, por lo que podría no ser la mejor solución en este momento.

Una mejor solución es usar el patternatributo, que usa una expresión regular para que coincida con la entrada:

<input type="text" pattern="\d*" />

\des la expresión regular para un número, *significa que acepta más de uno de ellos. Aquí está la demostración: http://jsfiddle.net/b8NrE/1/

js-codificador
fuente
2
Como JayPea aprendió, no todos los navegadores admiten todos los elementos HTML5 todavía, por lo que es mejor proporcionar una degradación elegante, como usted ha propuesto.
DOK
66
La validación de @Zut HTML5 no te impide ingresar esas claves. Simplemente evita que el formulario se envíe con esos caracteres. Si envía un formulario con una entrada del tipo numberque contiene otros caracteres, Chrome le mostrará un mensaje de error.
js-coder
2
@dotweb: veo tu punto. La diferencia entre los dos es que con el atributo de número, todos los caracteres alfabéticos se eliminan automáticamente cuando anulo la selección (desenfoque desencadenante) para la entrada. Esto no sucede cuando se usa el atributo de patrón. Supongo que esta distinción solo es importante si está utilizando AJAX para publicar sus datos, y está utilizando algún otro evento que no sea submitpara activar la publicación.
Zut
66
Esto no hace lo que OP pidió. Solo enteros /\d*/.test(1.1) // true
vsync el
2
@vsync pattern="\d*"no es lo mismo que /\d*/, pattern="\d*"es igual a /^(?:\d*)$/, consulte la documentación de atributos de patrón HTML5 .
Wiktor Stribiżew
37 
<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Con este código, la entrada al campo de texto limita para ingresar solo dígitos. El patrón es el nuevo atributo disponible en HTML 5.

Atributo de patrón doc

thejustv
fuente
99
De acuerdo con la especificación, el atributo de patrón solo se puede utilizar cuando el tipo de entrada es Texto, Buscar, URL, Teléfono, Correo electrónico, Contraseña (como se muestra aquí con el tipo "Texto"). Esto significa que la semántica del tipo de entrada numérica y, por lo tanto, (lo más importante) los teclados numéricos en pantalla de algunas tabletas y teléfonos se pierde al usar este método.
pwdst
3
Esto en firefox 36.0 le permite escribir letras y caracteres especiales.
Malavos
1
No limita la entrada a números solamente, ¡aún puede escribir letras!
HadidAli
35

La manera fácil de usar JavaScript:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >
Tarek Kalaji
fuente
No entiendoreplace(/(\..*)\./g, '$1')
codyc4321
3
Esto es importante para aceptar números flotantes y repetir .solo una vez, por ejemplo, 123.556se puede escribir.
Tarek Kalaji
8
@TarekKalaji - las preguntas indican números enteros y no números flotantes
vsync
¿Qué tal un dispositivo móvil? porque el texto de tipo muestra todos los teclados (caracteres alfanuméricos también)
Nuri YILMAZ
27

El patrón es bueno, pero si desea restringir la entrada a números solo con type = "text", puede usar oninput y una expresión regular como se muestra a continuación:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

Me calienta :)

Viktor Karpyuk
fuente
Tenga en cuenta que este enfoque podría negar su método (cambio) (controlador de eventos) y también borrar su valor predeterminado en el cuadro de entrada.
HadidAli
14

Esto no es solo para html5, todo el navegador funciona bien. prueba esto 

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
Leopard
fuente
12
Esto es malo. En el intento de entrada: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V. Usar en su oninputlugar
zanderwar
1
Cuando se escribió esta respuesta, HTML5 no se publicó. @zanderwar
Muhammet Can TONBUL
11

Los patrones siempre son preferibles para restricción, intente oninputy minocurra 1 para ingresar solo números del 1 en adelante

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >
Noothan yv
fuente
Es una solución muy interesante. ¿Qué significa `value = $ {var}`?
Desarrollador
@AcademyofProgrammer valor predeterminado de ejemplo para esa entrada
Shinigamae
¡la mejor respuesta! funciona para pegar, funciona incluso en IE (10+), le da la libertad de mostrar cualquier teclado a través del tipo de entrada y no hace que Chrome muestre estas molestas flechas arriba / abajo dentro del campo.
Janosch
5

¿Has intentado establecer el stepatributo en 1 como este?

<input type="number" step="1" />
DevTeamExpress
fuente
4

Tal vez no se ajusta a todos los casos de uso, pero

<input type="range" min="0" max="10" />

puede hacer un buen trabajo: violín .

Revisa la documentación .

Luca Fagioli
fuente
3

Sí, HTML5 sí. Pruebe este código ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

¿Ves el parámetro mínimo y máximo? Lo probé usando Chrome 19 (funcionó) y Firefox 12 (no funcionó).

wilsonfoz
fuente
Esto supone que desea un rango conocido. Pero si quisieras algún valor entero, ¿funcionaría esto?
RandomHandle
3

Solo poniéndolo en su campo de entrada: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

ileas
fuente
3

Estaba trabajando en Chrome y tuve algunos problemas, aunque uso atributos html. Terminé con este código js

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});
a.valchev
fuente
Terminé usando esto también con 1 ajuste menor; Cambié parseInt (value) a parseInt (value.replace ('.', ''). Esto me permitió pegar 1.56 y mantener el valor mostrado en 156 en lugar de 1.
codescribblr
2

De las especificaciones

step="any"o número positivo de coma flotante
Especifica la granularidad del valor del elemento.

Entonces, simplemente podría configurarlo en 1:

David Hedlund
fuente
8
He intentado esto, pero el problema es que aún puede escribir un número de coma flotante en el cuadro de texto.
JayPea
Entonces, ¿necesita un código que impida al usuario escribir un punto decimal?
Blazemonger
2

Establezca el stepatributo en cualquier número flotante, por ejemplo, 0.01 y estará listo.

Mantas K.
fuente
1 
var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});
Sarthak
fuente
0

Actualmente, no es posible evitar que un usuario escriba valores decimales en su entrada solo con HTML. Tienes que usar javascript.

Michal
fuente
0 

<input type="number" oninput="this.value = Math.round(this.value);"/>
Expandir fragmento

R. Yaghoobi
fuente
-2

En el futuro ™ (consulte ¿Puedo usarlo? ), En los agentes de usuario que le presentan un teclado, puede restringir una entrada de texto solo con números input[inputmode].

Weston
fuente
inputmodees principalmente para dispositivos de mano y activará la distribución correcta del teclado, pero para computadoras "normales" con teclados, no impedirá ingresar lo que desee.
vsync