jquery - type - pattern html5 solo numeros decimales

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

Question

Estoy usando el Validator 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 punto flotante. Esto parece increíblemente miope ya que solo será un validador útil cuando los campos de su base de datos tengan números de punto flotante firmados (para ints sin signo, tendrá que recurrir a la validación de "patrones" y perder características adicionales como las flechas arriba y abajo para los navegadores que lo soportan). ¿Hay otro tipo de entrada o quizás un atributo que restringiría la entrada a enteros sin signo solo? No pude encontrar ninguna, gracias.

EDITAR

Ok, muchachos, aprecio su tiempo y ayuda, pero veo que hay 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 de punto flotante negativo 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 fue 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 "no, no es así". No quise 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.

Answer 1

¿Has intentado establecer el atributo de step a 1 como este?

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

Answer 2

El patrón es bueno, pero si desea restringir la entrada a números solo con tipo = "texto", 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 arrepiento :)

Answer 3

En Future ™ (ver Can I Use ), en los agentes de usuario que le presentan un teclado, puede restringir una entrada de texto a solo numérica con la input[inputmode] .

Answer 4

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;
});

Answer 5

Establecer step="any" . Funciona bien. Referencia: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Answer 6

Establezca el atributo de step 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 atributo de pattern , que usa una expresión regular para coincidir con la entrada:

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

/d es 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/

Answer 7

Establezca el atributo de step en cualquier número flotante, por ejemplo, 0.01 y estará listo para comenzar.

Answer 8

Esto no es solo para html5, todos los navegadores funcionan bien. prueba esto

onkeyup="this.value=this.value.replace(/[^0-9]/g,'''');"

Answer 9

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'');" >

Answer 10

Los patrones siempre son preferibles para la restricción, intente el oninput y el min ocurre 1 para ingresar solo números desde 1 en adelante

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'''');"
                                value=${var} >

Answer 11

Por cierto, parece que si tiene algo más que un número en una entrada de "número", val () etc. devuelve ''''. Acabo de poner una marca y parece funcionar para lo que necesito (restricción de letras y otros caracteres).

if( var == '''' ) {
    alert( ''Var is not a number'' );
}

Trabaja con ceros iniciales, puntos decimales, etc.

Answer 12

Sí, HTML5 lo hace. Prueba 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>

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

Answer 13

Solo onkeypress=''return event.charCode >= 48 && event.charCode <= 57'' en el campo de entrada: onkeypress=''return event.charCode >= 48 && event.charCode <= 57''

Answer 14

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

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

puede hacer un buen trabajo: fiddle .

Consulte la documentation .

Answer 15

De las especificaciones

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

Así que simplemente puedes ponerlo en 1 :

Answer 16

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

Lo mejor que puedes lograr solo con HTML

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

Answer 17

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);
    }
});

Answer 18

 <input type="number" min="0" step="1" pattern="/d+"/>

Answer 19

<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

Usando este código, la entrada al límite de texto para ingresar solo dígitos ... Patrón es el nuevo atributo disponible en HTML5

Patter atributo doc