JavaScript: validación de entrada en el evento Keydown

Question

Estoy intentando hacer una validación de información en contra de la entrada de texto del usuario en el proceso del evento keydown. La razón por la que estoy tratando de validar en el evento keydown es porque no quiero mostrar los caracteres que se consideran ilegales en el cuadro input al comienzo.

La validación estoy escribiendo es así,

function validateUserInput(){ 
    var code = this.event.keyCode; 
    if ((code<48||code>57) // numerical 
     &&code!==46 //delete 
     &&code!==8 //back space 
     &&code!==37 // <- arrow 
     &&code!==39) // -> arrow 
    { 
    this.event.preventDefault();   
    } 
} 

puedo seguir así, sin embargo estoy viendo inconvenientes en esta aplicación. Esos son, por ejemplo:

1. La declaración condicional se hace cada vez más larga cuando pongo más condiciones para examinar.
2. keyCodes pueden ser diferentes para los navegadores.
3. No solo debo verificar lo que no es legal, sino también verificar qué son excepcionales. En los ejemplos anteriores, eliminar, retroceso y teclas de flecha son excepcionales.

Pero la característica que no quiero perder es no tener que mostrar la entrada en el textarea a menos que pase la validación. (En caso de que el usuario intente poner caracteres ilegales en el textarea, no debería aparecer nada en absoluto) Es por eso que no estoy validando el evento keyup.

Así que mi pregunta es:

1. ¿Hay mejores maneras de validar la entrada en keydown caso de comprobar keyCode por keyCode?
2. ¿Hay otras maneras de capturar las entradas de usuario que no sean el evento keydown antes de que el navegador lo muestre? ¿Y una forma de ponerle la validación?

Gracias por la ayuda con antelación.

Answer 1

Si usted está comprobando una clave imprimible, que es exactamente lo parece que lo está haciendo, debería usar el evento keypress en su lugar, ya que es el único lugar en el que podrá obtener información confiable sobre el carácter que representa la tecla. No puede detectar las teclas numéricas de manera confiable en el evento keydown. Además, es una mala idea suprimir las teclas de flecha y eliminar/retroceder las teclas. ¿Qué ganas al hacer eso?

También hay algunos errores: en Firefox, que necesita para obtener el objeto Event del parámetro pasado a la función de controlador de eventos, y si usted está usando una función de controlador de eventos DOM0 en lugar de addEventListener() o attachEvent(), que debiera use return false; para suprimir el comportamiento predeterminado. Aquí está mi código recomendado:

var input = document.getElementById("your_input_id"); 

input.onkeypress = function(evt) { 
    evt = evt || window.event; 
    var charCode = evt.which || evt.keyCode; 
    var charStr = String.fromCharCode(charCode); 
    if (/\d/.test(charStr)) { 
     return false; 
    } 
}; 

Answer 2

No creo que necesite la pieza preventDefault. Si desea capturar claves (por event.keyCode, o combinaciones utilizando, por ejemplo, event.ctrlKey + event.keyCode), verifique si está permitido keyCode. Si lo es, simplemente devuelva true; de lo contrario, devuelva false. Si devuelve false, la entrada de la clave no se escribirá en el campo de entrada, de lo contrario lo hará.

No se me ocurren mejores formas de utilizar KeyCode. Puede usar String.fromCharCode([keyCode]) si desea verificar valores de caracteres específicos, pero sigue reduciéndose a algún ciclo para verificar los KeyCodes que desea validar. Puede ser un switch ... case podría ofrecer un poco más de legibilidad.

Aquí es una pieza de código de un controlador de eventos keydown yo uso (sólo para demostración, no hace nada):

function handleKey(e, thisFld) { 
     thisFld = (thisFld || this); 
       e = e || event; 
    if (!e) { 
     return true; 
    } 

    var isCtrl = e.ctrlKey, 
     isShift = e.shiftKey, 
     isAlt = e.altKey, 
     kc = e.keyCode || e.which, 
     codes = [27, 38, 40], 
     keys = { 
       escape: 27, 
       up: 38, 
       down: 40, 
       ins: 45, 
       del: 46, 
       one: 49 
       }; 

    if (isCtrl && kc === keys.del) { ... } 
    if (isAlt && kc === keys.ins) { ... } 
     //etc 
    return true; 
} 

Answer 3

aquí hay un violín con el que puedes jugar y puede proporcionarte más información.

jsFiddle: keydown/keypress demo w/ info display

Parecería que las últimas versiones de navegadores utilizan preventDefault(). El código siguiente es similar a lo que he puesto en jsFiddle pero es independiente y se puede pegar en un archivo HTML que se puede acceder localmente a prueba (tenga en cuenta que es amigable móvil para pruebas de dispositivos.

<html> 
<head> 
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, user-scalable=no"/> 
<style> 
.b {color:blue;} 
.r {color:red;} 
input {font-size:18px;} 
</style> 
<script> 
function byId(el) {return document.getElementById(el)} 
function sfcc (n) {return String.fromCharCode(n);} 
function foo(event) { 
    var he='&#x'+event.keyIdentifier.split('+')[1]+';'; 
    var html='' 
    var cn=event.target.className; 
    html+='kc: [<span class="b">'+sfcc(event.keyCode)+'</span>] '; 
    html+='wh: [<span class="b">'+sfcc(event.which)+'</span>] '; 
    html+='he: [<span class="b">'+he+'</span>]<br>'; 
    for (i in event) 
     if (["string","boolean","number"].indexOf(typeof event[i]) >-1 && i.toUpperCase()!=i) 
      html+='<span>'+i + '</span>: [<span class="r">'+event[i]+'</span>]<br>'; 
    byId('kc').innerHTML=html; 
    switch (cn) { 
     case "pd": event.preventDefault(); return; 
     case "rf": return false; 
    } 
} 
</script> 
</head> 
<body> 
kp/pd: <input class="pd" type="text" onkeypress="foo(event)"/><br> 
kp/rf: <input class="rf" type="text" onkeypress="foo(event)"/><br> 
kd/pd: <input class="pd" type="text" onkeydown="foo(event)"/><br> 
kd/rf: <input class="rf" type="text" onkeydown="foo(event)"/><br> 
<div id="kc"></div> 
</body> 
</html> 

Answer 4

lo tanto, he encontró que la pulsación de tecla es ideal para los caracteres imprimibles, y keydown para todos los demás. puede comprobar el event.charCode en keypress de caracteres imprimibles (debe ser 0 para no imprimible). puede utilizar event.keyCode en keydown para las flechas y tal.

Así es como acabo de obtener una autocompleta para trabajar en Chrome y Firefox.