2012-02-19 11 views
11

que estoy tratando de analizar los eventos KeyDown del bloque numérico con lo siguiente:Javascript numérico código clave de análisis

$('#myDiv').keydown(function(e) { 
    val = String.fromCharCode(e.which) 
}); 

El problema es que el teclado 0-9 códigos de tecla de retorno de 96-105 que, según fromCharCode() son las letras minúsculas a-i. ¿Cómo obtengo los eventos de teclado del teclado numérico para resolverlos al número apropiado?

Respuesta

21

usted no: se utiliza el evento keypress. El evento keypress es el único evento que le dará información confiable acerca de los caracteres escritos. Su código actual funcionará si simplemente cambia keydown a keypress.

+1

Supongamos que personajes reales tanto desee en el teclado, y también desea capturar y detener la tecla Intro, para evitar que un envío de formulario? La detención de la pulsación de tecla aún parece enviarse. – enigment

+0

No puedo expresar cuán agradecido estoy por esta respuesta. Esta fue mi salvación tratando de atrapar todos los diferentes casos posibles con shift, alt, teclado numérico y teclados móviles. 'keypress' lo hace fácil como un pastel. – nirazul

9

El valor which pasado a keydown no es un código de carácter; es un código de tecla (y los códigos varían de navegador/sistema operativo a navegador/sistema operativo). Puede asignarlo a un personaje usando the tables on this page, pero decir que esto es un poco ... incómodo ... sería subestimar el caso. :-)

De lo contrario, su mejor opción es esperar el evento keypress, que tendrá el código de carácter (si corresponde) en lugar de un código de tecla.

Ejemplo: Live copy | Live source

jQuery(function($) { 

    $("#theField") 
    .keydown(function(event) { 
     showKey("keydown", event.which); 
    }) 
    .keypress(function(event) { 
     showKey("keypress", event.which); 
    }) 
    .focus(); 

    function showKey(eventName, which) { 
    display(eventName + 
      ": " + which + " (" + 
      String.fromCharCode(which) + ")"); 
    } 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

Utilizando este código HTML:

<input type="text" id="theField"> 
1

Hay una manera de hacer esto con keydown, si pulsación de tecla no es viable debido a las necesidades de cancelación de eventos, etc. Utilice una sentencia if() con esta prueba:

parseInt(event.keyIdentifier.substring(2),16) > 47 && parseInt(event.keyIdentifier.substring(2),16) < 58 

O, con eventos de jQuery:

parseInt(event.originalEvent.keyIdentifier.substring(2),16) > 47 && parseInt(event.originalEvent.keyIdentifier.substring(2),16) < 58 

En estos ejemplos se supone que "evento" es el evento de selección de teclas. keyIdentifier es un número hexadecimal que representa el valor unicode para el char relacionado. Usando keyIdentifier, los números del teclado numérico/teclado Y los números sobre su teclado QWERTY tendrán todos los mismos valores, 48 ​​- 57 (U + 0030 - U + 0039), incluso con el evento keyDown.

Los valores Unicode en los navegadores se verán como U + 0030 o U + 002F. Analice esta cadena para obtener solo el valor hexadecimal, luego use parseInt() con una base de 16 para convertirlo a base-10.

1

Las respuestas aquí están obsoletas porque KeyboardEvent.which, KeyboardEvent.keyCode y KeyboardEvent.charCode están en desuso.

La forma adecuada para que las últimas versiones de Firefox, Chrome, IE/Edge y Safari obtengan la clave de caracteres es usar KeyboardEvent.key y debería funcionar con cualquier evento clave, no solo keypress.

KeyboardEvent.key Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.key));
<input placeholder="Start typing...">


Si usted todavía tiene que obtener el código de caracteres, se debe utilizar la propiedad KeyboardEvent.code.

KeyboardEvent.code Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.code));
<input placeholder="Start typing...">

0

puede utilizar keydown y detectar teclas del teclado numérico. Lo hice usando el siguiente código. Restar 48 de teclas del teclado numérico antes de interpretar las claves

function navigate(e) { 
     var keyCode = e.keyCode || e.which; 
     if (keyCode >= 96 && keyCode <= 105) { 
      // Numpad keys 
      keyCode -= 48; 
     } 
     var txtVal = String.fromCharCode(keyCode); 
Cuestiones relacionadas