html5 - only - ¿Por qué<input type="number" maxlength="3"> no funciona en Safari?

maxlength javascript

Question

Me gusta tener una entrada con un máximo de 3 caracteres. En Firefox todo funciona bien. Solo puedo escribir 3 números dentro de la entrada, pero en Safari puedes escribir muchos números dentro.

Puede probarlo en ambos buscadores con esto: http://flowplayer.org/tools/demos/validator/custom-validators.htm

Por ahora me di cuenta con un complemento válido, pero solo por interés, me gustaría saber por qué no funciona.

EDITAR:

con esto está funcionando

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

respuesta: ¿cómo puedo evitar las letras dentro de un elemento de texto?

Answer 1

Aquí hay una solución más simple. Para mí funcionó

<input type="number" id="cvv">


$("#cvv").on("keypress", function(evt) {
  var keycode = evt.charCode || evt.keyCode;
  if (keycode == 46 || this.value.length==3) {
    return false;
  }
});

el bloque JS evitará el "." (punto) por lo que uno no puede entrar en flotación. Estamos manteniendo el tipo de entrada como número, por lo que solo se utilizará el número como entrada. Si la longitud del valor es 3, devolverá falso, por lo que también se restringirá la duración de la entrada.

Answer 2

Básicamente, las propiedades Máx. Y Mín . Aún no son compatibles con el navegador Safari. No veo ningún defecto en la sintaxis. ¿Estás usando Safari versión 1.3+? o debajo de eso? Porque la propiedad maxlength es compatible con safari 1.3+.

Answer 3

El uso de la longitud de OnKeyDown puede restringirse

<input type="number" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

Happy Coding :)

Answer 4

Lo he logrado con:

<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>

y luego en JavaScript evité las letras:

$("#myField").keyup(function() {
    $("#myField").val(this.value.match(/[0-9]*/));
});

Answer 5

Puede intentar con user type = "text" y oninput como se muestra a continuación. Esto permitirá que los números solo.

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

Answer 6

Usé algo muy similar a la respuesta de @Jules, excepto que no permitirá el uso de teclas como shift + home. Dado que estamos validando números, utilicé isNaN en la función de teclado.

$("#myField").keyup(function() {
    var e = $("#myField");
    if(isNaN(e.val())){
        e.val(e.val().match(/[0-9]*/));
    }
});

Con...

<input id="#myField" inputmode="numeric" maxlength="3" pattern="([0-9]{3})" type="text" />

Answer 7

https://jsfiddle.net/zxqy609v/8/

function fixMaxlength(inputNumber) {
  var maxlength = $(inputNumber).attr("maxlength");
    $(inputNumber).keyup(function (evt) {
    this.value = this.value.substring(0, maxlength);
    this.value = this.value.replace(//D/g, '''');
  });
}