Saltar al contenido

¿Cómo capturar event.keyCode y cambiarlo a otro keyCode?

La guía paso a paso o código que hallarás en este post es la solución más rápida y efectiva que encontramos a esta duda o dilema.

Solución:

Las propiedades de los eventos del teclado son todas de solo LECTURA. No puede capturar un código clave y cambiarlo por otro.

Consulte la referencia de MDN – Eventos de teclado: todos son de solo lectura, no se pueden configurar.

Como mencionas en tu publicación. — Si no desea manejar, debe detener el navegador predeterminado key presione y configure usted mismo el valor deseado para el elemento.

Estoy usando el siguiente código para lograr el mismo resultado que si hubiera cambiado el keyCodesin poder cambiarlo realmente.

function inputValidation() 
    var srcField = event.srcElement;
    var sKey = event.keyCode;
    var inputLetter = String.fromCharCode(sKey);
    if (typeof(srcField) !== "undefined" && srcField !== null) 
        inputLetter = transformInput(inputLetter);
        var caretPos = srcField.selectionStart;
        var startString = srcField.value.slice(0, srcField.selectionStart);
        var endString = srcField.value.slice(srcField.selectionEnd, srcField.value.length);
        srcField.value = startString + inputLetter + endString;
        setCaretPosition(srcField, caretPos+1); // '+1' puts the caret after the input
        event.preventDefault ? event.preventDefault() : event.returnValue = false; //for IE8
   

srcField.selectionStart da la posición inicial del texto que ha seleccionado y srcField.selectionEnd da la posición final de la selección, si no ha seleccionado ningún texto srcField.selectionStart es igual srcField.selectionEnd.

La función setCaretPosition vino de esta respuesta por kd7. Solo lo cambié para que reciba el elemento en lugar de su Id.

function setCaretPosition(elem, caretPos) 
    if (elem != null) 
        if (elem.createTextRange) 
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
         else 
            if (elem.selectionStart) 
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
             else
                elem.focus();
        
    

Si bien las propiedades en la instancia de KeyboardEvent son de SOLO LECTURA, puede anular KeyboardEventy crea un getter para lo que quieras cambiar. Aquí hay un ejemplo que cambia los códigos clave de hjkl para que actúen como una flecha keys.

Object.defineProperty(KeyboardEvent.prototype, 'keyCode', 
    get: function() 
        switch (this.key) 
            case 'h': return 37; // left
            case 'j': return 40; // down
            case 'k': return 38; // up
            case 'l': return 39; // right
            default: return this.which
        
    
)

Te mostramos las reseñas y valoraciones de los usuarios

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *