javascript - validacion - Evite escribir no numérico en el número de tipo de entrada

validar formulario javascript html5

Question

El uso de <input type=number> hará que this.value dentro de un detector de eventos devuelva una cadena vacía si la entrada no es un número válido. Puede ver un ejemplo de esto en http://jsfiddle.net/fSy53/

Sin embargo, los caracteres no válidos aún se muestran en la entrada.

¿Hay alguna manera de obtener el valor que se muestra realmente, incluidos los caracteres no válidos, desde dentro de un detector de eventos?

Mi objetivo final es evitar que los usuarios escriban realmente caracteres no numéricos en el campo. Necesito usar type=number para que el teclado numérico virtual sea utilizado por dispositivos móviles. Mi objetivo sería hacer algo como this.value = this.value.replace(/[^0-9.]/g, "") en la keyup keypress , pero esto no funciona porque si se escribe un carácter no válido, leyendo de this.value returns "" .

Answer 1

Esta solución parece estar funcionando bien para mí. Se basa en la solución de @ pavok al conservar los comandos de tecla ctrl.

document.querySelector("input").addEventListener("keypress", function (e) {
  if (
    e.key.length === 1 && e.key !== ''.'' && isNaN(e.key) && !e.ctrlKey || 
    e.key === ''.'' && e.target.value.toString().indexOf(''.'') > -1
  ) {
    e.preventDefault();
  }
});

Answer 2

Intentalo:

document.querySelector("input").addEventListener("keyup", function () {
   this.value = this.value.replace(//D/, "")
});

Answer 3

Intente evitar el comportamiento predeterminado si no le gusta el valor de la clave entrante:

document.querySelector("input").addEventListener("keypress", function (evt) {
    if (evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

Answer 4

Puede lograr esto al evitar que ocurra el evento keyPress para valores no numéricos

ej. (usando jQuery)

$(''.input-selector'').on(''keypress'', function(e){
  return e.metaKey || // cmd/ctrl
    e.which <= 0 || // arrow keys
    e.which == 8 || // delete key
    /[0-9]/.test(String.fromCharCode(e.which)); // numbers
})

Esto tiene en cuenta todos los diferentes tipos de entrada (por ejemplo, la entrada del teclado numérico tiene códigos diferentes al teclado), así como el retroceso, las teclas de flecha, control / cmd + r para volver a cargar, etc.

Answer 5

Tenga en cuenta que e.which , e.keyCode y e.charCode están en desuso: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

Yo prefiero e.key :

document.querySelector("input").addEventListener("keypress", function (e) {
    var allowedChars = ''0123456789.'';
    function contains(stringValue, charValue) {
        return stringValue.indexOf(charValue) > -1;
    }
    var invalidKey = e.key.length === 1 && !contains(allowedChars, e.key)
            || e.key === ''.'' && contains(e.target.value, ''.'');
    invalidKey && e.preventDefault();});

Esta función no interfiere con los códigos de control en Firefox ( Retroceso , Tab , etc.) al verificar la longitud de la cadena: e.key.length === 1 .

También evita los puntos duplicados al principio y entre los dígitos: e.key === ''.'' && contains(e.target.value, ''.'') e.key === ''.'' && contains(e.target.value, ''.'')

Lamentablemente, no evita múltiples puntos al final: 234....

Parece que no hay forma de sobrellevarlo.

Answer 6

inputs[5].addEventListener(''keydown'', enterNumbers);

function enterNumbers(event) {
  if ((event.code == ''ArrowLeft'') || (event.code == ''ArrowRight'') ||
     (event.code == ''ArrowUp'') || (event.code == ''ArrowDown'') || 
     (event.code == ''Delete'') || (event.code == ''Backspace'')) {
     return;
  } else if (event.key.search(//d/) == -1) {
    event.preventDefault();
  }
}

en este caso, el valor del campo de entrada permanece intacto cuando se presiona un botón que no es numérico, y aún se borra, retrocede, flecha arriba-abajo-izquierda-derecha funciona correctamente y se puede usar para modificar la entrada digital.