4

Cuando tecleo siempre sale código ASCII en mayúsculas

var texto       = document.getElementById('capture');
texto.addEventListener('keydown', function(keyboardEvent) {
     let code   = keyboardEvent.keyCode;//.key
console.log(code)            
});
<input type="text" id="capture">

¿Como puedo obtener el código ASCII respectivo a la tecla presionada minúscula/mayúscula?

1
  • Supongamos que ingresan "a". ¿Necesitas obtener el código ASCII de "a" y "A"? o solo el código de la letra ingresada ya sea mayúscula o minúscula?
    – Marcos
    Commented el 17 feb. 2017 a las 12:57

4 respuestas 4

4

Debes utilizar el evento keypress para poder lograr obtener el código de las letras en minúsculas.

var texto       = document.getElementById('capture');
texto.addEventListener('keypress', function(keyboardEvent) {
     let code   = keyboardEvent.keyCode;//.key
console.log(code)            
});
<input type="text" id="capture">

4
  • funciona solo con keypress? o lo sumo 32?
    – hubman
    Commented el 17 feb. 2017 a las 6:21
  • Solo por curiosidad, ¿por qué usas var para el elemento #capture y let para el código de la tecla pulsada?
    – gugadev
    Commented el 17 feb. 2017 a las 13:39
  • 1
    hubman: lo que pasa es que keydown y keyup devuelven el código de la tecla presionada en el teclado, y keypress devuelve la letra que estas escribiendo.
    – Javier
    Commented el 17 feb. 2017 a las 15:10
  • Guz: puedes utilizar var igualmente, pero utilizas let, para definir que el alcance de la variable solo será dentro del bloque de la función, es decir, que cuando finalicen las lineas dentro de la función del listener, la variable code, ya no estará disponible. Para mayor referencia, puedes visitar este enlace. developer.mozilla.org/es/docs/Web/JavaScript/Referencia/…
    – Javier
    Commented el 17 feb. 2017 a las 15:42
2

Yo lo haría así:

var texto = document.getElementById('capture');
texto.addEventListener('keydown', function(keyboardEvent) {
  let code = String.fromCharCode(keyboardEvent.keyCode).toLowerCase().charCodeAt();
  console.log(code);
});
<input type="text" id="capture">

o lo que es lo mismo:

var texto document.getElementById('capture');
texto.addEventListener('keydown', (keyboardEvent) => console.log(String.fromCharCode(keyboardEvent.keyCode).toLowerCase().charCodeAt()));

Básicamente esto lo que hace es que transformar el ascii a char, luego lo cambia a minúscula y después de regreso a ascii.

2
  • Tu código funciona bien, solo hay un detalle si escribo un numero con el teclado numérico este escribe las letras de a - i siendo los números 1 - 9
    – JuankGlezz
    Commented el 17 feb. 2017 a las 14:39
  • debes tratar de manejar todos los casos si es caracter, numero o caracter especial. Eso mediante un if o case
    – Pedro Cova
    Commented el 19 feb. 2017 a las 6:36
1

Tu código está perfecto. Sólo tienes que transformar de vuelta a character y detectar si el evento tiene el modificador shiftKey

var texto       = document.getElementById('capture');
texto.addEventListener('keypress', function(keyboardEvent) {
     let code   = keyboardEvent.keyCode;//.key
     let character = String.fromCharCode(keyboardEvent.keyCode);
     if(!keyboardEvent.shiftKey) {
         character=character.toLowerCase();
     }
console.log({code:code, character:character})            
});
<input type="text" id="capture">

2
  • Tu código funciona bien, solo hay un detalle si escribo un numero con el teclado numérico este escribe las letras de a - i siendo los números 1 - 9
    – JuankGlezz
    Commented el 17 feb. 2017 a las 14:41
  • efectivamente, usando keydown los códigos están desplazados en 48 lugares. Usando keypress (ve la edición de mi respuesta) funciona acorde a lo esperado
    – ffflabs
    Commented el 17 feb. 2017 a las 15:34
1

Se explica en KeyboardEvent (MDN):

  • KeyboardEvent.keyCode (👎 obsoleto). Representa el código numérico, dependiente del sistema y la implementación,que identifica al valor no modificado de la tecla presionada. Es decir que es el número de la tecla, y no el del caracter ingresado.

En cambio, podés obtener el valor con:

  • KeyboardEvent.key. Devuelve el valor de la tecla presionada por el usuario. Y, para caracteres imprimibles, devuelve un string que contiene la representación de la tecla (el caracter).

var texto = document.getElementById('capture');

texto.addEventListener('keydown', function(keyboardEvent) {
    let tecla = keyboardEvent.key;
    
    //Validamos que no sea "Dead", "Shift", "Control", etc.
    if (tecla.length == 1) {
        let code = tecla.charCodeAt(0); //Obtenemos el código ASCII
        console.log('Tecla', tecla, 'Código', code);
    }
});
<input type="text" id="capture">


Nota:

No se recomienda más el uso de onkeydown para interceptar teclas. Entre los puntos principales a mencionar: no va a funcionar con muchos de los teclados de dispositivos táctiles. Y, hoy en día, no creo que quieras dejar afuera a la mayoría de los celulares.

Además, si estabas pensando realizar alguna validación, ¿qué debería ocurrir cuando el usuario pega texto sin presionar ninguna tecla?

En cambio, te recomendaría utilizar exclusivamente los eventos que se disparan al modificar un elemento, como oninput, o a lo sumo onkeypress.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.