How to catch event.keyCode and change it to another keyCode?
Keyboard event properties are all READ-only. You cannot capture one keyCode and change it to another.
See reference from MDN - Keyboard Events - All are read only can't be set.
As you mentioned in your post. -- If you wan't to handle, then you have to stop browser default key press and set the desired value to the element yourself.
I am using the following code to achieve the same result as if I had changed the keyCode
, without actually being able to change it.
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
gives the starting position of the text you have selected and srcField.selectionEnd
gives the end position of the selection, if you haven't selected any text srcField.selectionStart
equals srcField.selectionEnd
.
The function setCaretPosition
came from this answer by kd7. I only changed it to make it receive the element instead of its 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();
}
}
}