ejemplo - JavaScript KeyCode versus CharCode

keycode jquery

Question

El problema:

• Limite los caracteres permitidos en una entrada HTML solo a AZ AZ.
• Para requisitos comerciales, esto debe hacerse en KeyPress, de modo que el carácter simplemente no se permite incluso aparecer en la entrada.
• Tab, enter, arrows, backspace, shift están permitidos. El usuario debe poder moverse libremente dentro y fuera del cuadro de texto, eliminar caracteres, etc.

Este es el punto de partida de mi código ...

var keyCode = (e.keyCode ? e.keyCode : e.which);

Sin embargo, cada valor que obtengo en KeyCode no corresponde a ninguno de los gráficos de caracteres que he visto en la web. Por ejemplo, el personaje "h" me da un código de retorno de 104.

¿KeyCode es diferente a CharCode? ¿Qué código contiene los caracteres de control? ¿Necesito convertir?

¿Cómo puedo restringir la entrada a AZ AZ y permitir las claves que necesito en JavaScript?

Answer 1

/ * No obtendrá un código de tecla al presionar las teclas que no sean de impresión, ¿por qué no capturarlas en el teclado? * /

function passkeycode(e){
    e= e || window.event;
    var xtrakeys={
        k8: ''Backspace'', k9: ''Tab'', k13: ''Enter'', k16: ''Shift'', k20: ''Caps Lock'',
        k35: ''End'', k36: ''Home'', k37: ''Ar Left'', k38: ''Ar Up'', k39: ''Ar Right'',
        k40: ''Ar Down'', k45: ''Insert'', k46: ''Delete''
    },
    kc= e.keyCode;
    if((kc> 64 && kc<91) || xtrakeys[''k''+kc]) return true;
    else return false;
}

inputelement.onkeydown=passkeycode;

kc> 64 && kc <91 // a-zA-Z

xtrakeys [''k'' + integer]) define los códigos clave especiales permitidos

Answer 2

Aquí hay un marcado de ejemplo:

<form id="formID">
    <input type="text" id="filteredInput">
    <input type="text" id="anotherInput">
</form>

La siguiente lógica se puede utilizar para interceptar la entrada del teclado (en este caso, a través de un contenedor jQuery listo para documentos).

Puede parecer un poco ridículo, pero básicamente, verifico todo lo que quiero permitir (en su caso, las letras de la A a la Z son insensibles) y no hago nada . En otras palabras, la acción predeterminada está permitida, pero se previene cualquier entrada que no sea alfa.

La navegación de teclado estándar, como las teclas de flecha, Inicio, Fin, Pestaña, Retroceso, Eliminar, etc., se comprueban y se permiten.

NOTA: Este código se escribió originalmente para satisfacer la entrada del usuario que solo permite valores alfanuméricos (A - Z, a - z, 0 - 9), y dejé esas líneas intactas como comentarios.

        <script>
            jQuery( document ).ready( function() {

                // keydown is used to filter input
                jQuery( "#formID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;
                    //console.log( _key + '' '' + _keyCode + '' '' + _shifted + '' '' + _altKey + '' '' + _controlKey );

                    if( this.id === jQuery( ''#filteredInput'' ).prop( ''id'' ) ) {
                        if(
                            // BACK,         TAB
                            ( _key === 8 || _key === 9 )    // normal keyboard nav
                        ){}

                        else if(
                            // END,           HOME,          LEFT,          UP,            RIGHT,         DOWN
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )  // normal keyboard nav
                        ){}

                        else if(
                            // DELETE
                            ( _key === 46 ) // normal keyboard nav
                        ){}

                        else if(
                            ( _key >= 65 && _key <= 90 )    // a- z

                            //( _key >= 48 && _key <=  57 && _shifted !== true ) ||   // 0 - 9 (unshifted)
                            //( _key >= 65 && _key <=  90 ) ||                        // a- z
                            //( _key >= 96 && _key <= 105 )                           // number pad 0- 9
                        ){}

                        else {
                            e.preventDefault();
                        }
                    }

                });
            });
        </script>

Answer 3

Buena pena. KeyboardEvent. [Key, char, keyCode, charCode, que] están en desuso o tienen errores pendientes de acuerdo con los documentos API de Mozilla - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent . Incluso JQuery le pasa la pelota a este y le permite al usuario resolverlo https://api.jquery.com/keydown/ .

Answer 4

Creo que KeyCode devuelve el valor de la clave ASCII, Ascii-104 es h.

http://www.asciitable.com/

Charcode es como se indica en otra respuesta, una alternativa utilizada en algunos navegadores.

Aquí hay un artículo con un ejemplo de crssbrowser: http://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html

Answer 5

Creo que estás tomando el enfoque equivocado por completo. ¿Qué tal algo así como:

<input id="test">

<script type="text/javascript">
var aToZ = function(el){
    if(this.value.match(/[^a-zA-Z]/)){
        this.value = this.value.replace(/[^a-zA-Z]+/, '''')
    }
}
document.getElementById("test").onkeyup = aToZ
</script>

Además, no se olvide de repetir el cheque en el servidor también.

Answer 6

En realidad, 104 es el código ASCII para minúscula ''h''. Para obtener el código ASCII del carácter mecanografiado onkeypress, puede usar e.which || e.keyCode e.which || e.keyCode , y no necesita preocuparse por las teclas presionadas porque para el texto escrito, la pulsación de teclas se repite automáticamente en todos los navegadores (de acuerdo con el excelente http://unixpapa.com/js/key.html ).

Entonces todo lo que realmente necesitas es:

<input id="textbox">

<script type="text/javascript">
document.getElementById(''textbox'').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

Pruébalo: http://jsfiddle.net/wcDCJ/1/

(Los códigos ASCII son de http://en.wikipedia.org/wiki/Ascii )

Answer 7

Las respuestas a todas sus preguntas se pueden encontrar en la página siguiente .

... pero en resumen:

• El único evento del que puede obtener información de carácter confiable (a diferencia de la información del código de tecla) es el evento de keypress .
• En el evento de keypress , todos los navegadores excepto IE <= 8 almacenan el código de carácter en la propiedad del evento. La mayoría, pero no todos, de estos navegadores también almacenan el código del carácter en la propiedad charCode .
• En el evento de keypress , IE <= 8 almacena el código de carácter en la propiedad keyCode .

Esto significa obtener el código de carácter correspondiente a la pulsación de tecla, lo siguiente funcionará en todas partes, suponiendo que un objeto de evento de pulsación de tecla se almacena en una variable llamada e :

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

Esto generalmente le devolverá un código de carácter donde existe uno y 0 en caso contrario. Hay algunos casos en los que obtendrá un valor distinto de cero cuando no debería:

• En Opera <10.50 para las teclas Insertar , Eliminar , Inicio y Fin
• En versiones recientes de Konqueror para claves que no son de caracter.

La solución para el primer problema está un poco involucrada y también requiere usar el evento keydown .

Answer 8

onKeyPress tiene diferentes códigos para letras mayúsculas y minúsculas. Probablemente descubrirá que encender el candado y luego escribir su carta le daría el código que espera

onKeyUp y onKeyDown tienen los mismos códigos de caracteres para letras mayúsculas y minúsculas. Recomendaría usar onKeyUp porque es el más cercano a onKeyPress