Comment attraper event.keyCode et le changer en un autre keyCode?

Question

J'ai vérifié d'autres questions ici à SO, mais ils ne répondent pas à ma question. Je veux simplement attraper certain keyCode et le remplacer par un autre. Je travaille avec des personnages, pas des espaces blancs, et je n'ai pas besoin de perdre le focus ou autre.

Voici mon code. Mais vous pouvez remplacer ces keyCodes par votre (par exemple lorsque vous appuyez sur la touche majuscule "A", vous devez remplacer par zéro 0, etc.). L'idée est de remplacer le code de clé.

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; 
     } 
    } 
}); 

J'ai essayé avec le keydown et le keyup aussi bien. Ils ne modifient pas le code de clé. Comment puis je faire ça?

P.S. Si possible, je cherche une solution qui ne fait pas "event.preventDefault() et insère manuellement la clé désirée dans le champ de saisie, puis déplace le curseur jusqu'à la fin". Je veux une solution plus propre et "correcte". Je vous remercie.

Answer 1

Les propriétés d'événement de clavier sont toutes en lecture seule. Vous ne pouvez pas capturer un code clé et le changer à un autre.

Voir la référence de MDN - Keyboard Events - Tous sont en lecture seule ne peuvent être réglés.

Comme vous l'avez mentionné dans votre message. - Si vous ne voulez pas gérer, vous devez arrêter la touche par défaut du navigateur et régler vous-même la valeur souhaitée sur l'élément.

Answer 2

J'utilise le code suivant pour obtenir le même résultat que si j'avais changé le keyCode, sans pouvoir le modifier.

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 donne la position de départ du texte que vous avez sélectionné et srcField.selectionEnd donne la position finale de la sélection, si vous avez sélectionné aucun texte srcField.selectionStart égal srcField.selectionEnd. La fonction setCaretPosition provenait de this answer par kd7. Je l'ai seulement changé pour lui faire recevoir l'élément au lieu de son 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(); 
     } 
    } 
}