How to catch event.keyCode and change it to another keyCode?

Question

I have checked other questions here at SO, however they do not answer my question. I want to simply catch certain keyCode and replace it with another. I am working with char

Answer 1

you can change value as manuel and handle keypress. if you want to check key declare a variable and check your keycode.

this.event.target.value = this.event.target.value + ".";
return false;

full code:

function isNumberKeyDec(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var apos = 0;
    if (charCode == 44) {
        apos = 1;
        charCode = 46;
    }
    if (this.event.target.value.length == 0 && charCode == 46) {
        return false;
    }
    if (this.event.target.value.length == 1 && this.event.target.value == "0" && charCode == 48) {
        return false;
    }
    if (this.event.target.value.length == 1 && this.event.target.value == "0" && charCode != 46) {
        this.event.target.value = "";
    }    
    if (charCode > 31 && (charCode < 48 || charCode > 57) && charCode != 46) {

        return false;
    }
    if (charCode == 46 && this.event.target.value.indexOf(".") != -1) {
        return false;
    }
    if (this.event.target.value.indexOf(".") != -1) {
        if (this.event.target.value.substring(this.event.target.value.toString().indexOf(".")).length >= 2) {
            return false;
        }        
    }
    if (this.event.target.value.indexOf(".") == -1 && charCode != 46) {
        if (this.event.target.value.length >= 3 && charCode != 46) {
            return false;
        }
    }
    if (apos == 1) {
        this.event.target.value = this.event.target.value + ".";
        return false;
    }
    return true;
}

Answer 2

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

Answer 3

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.

Answer 4

While the properties on the KeyboardEvent instance is READ ONLY, you can override KeyboardEvent's prototype and create a getter for whatever you want to change. Here is an example which changes the keycodes of hjkl to act like arrow 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
        }
    }
})