Cómo atrapar event.keyCode y cambiarlo a otro código de tecla?

Question

He consultado otras preguntas aquí en SO, sin embargo, no responden a mi pregunta. Quiero simplemente capturar cierto código de clave y reemplazarlo por otro. Estoy trabajando con personajes, no con espacios en blanco, y no necesito perder el enfoque ni nada parecido.

A continuación se muestra mi código. Pero puede reemplazar esos KeyCodes con su (por ejemplo, cuando se presiona la tecla "A", debe reemplazarse por cero 0, etc.). La idea es reemplazar el código clave.

phrase.keypress(function(event) 
{ 
    if (event.shiftKey) 
    { 
     switch (event.keyCode) 
     { 
      // Cyrillic capitalized "Н" was pressed 
      case 1053: event.keyCode = 1187; event.charCode = 1187; event.which = 1187; break; 
      // Cyrillic capitalized "О" was pressed 
      case 1054: event.keyCode = 1257; event.charCode = 1257; event.which = 1257; break; 
      // Cyrillic capitalized "У" was pressed 
      case 1059: event.keyCode = 1199; event.charCode = 1199; event.which = 1199; break; 
     } 
    } 
}); 

He intentado con keydown y keyup también. No alteran el código de clave. ¿Cómo puedo hacer eso?

P.S. Si es posible, estoy buscando una solución que no "event.preventDefault() e inserte manualmente la clave deseada en el campo de entrada, luego mueva el cursor al final". Quiero una solución más limpia y "correcta". Gracias.

Answer 1

Las propiedades de eventos del teclado son TODAS LEÍDAS. No puede capturar un código clave y cambiarlo a otro.

Ver referencia de MDN - Keyboard Events - No se pueden configurar todas las de solo lectura.

Como mencionaste en tu publicación. - Si desea manejarlo, debe detener la pulsación predeterminada de la tecla del navegador y establecer el valor deseado para el elemento usted mismo.

Answer 2

Estoy utilizando el siguiente código para lograr el mismo resultado que si hubiera cambiado el keyCode, sin poder realmente cambiarlo.

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 de partida del texto que ha seleccionado y srcField.selectionEnd da la posición final de la selección, si no se ha seleccionado ningún texto srcField.selectionStart es igual a srcField.selectionEnd.

La función setCaretPosition vino de this answer 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(); 
     } 
    } 
}