Changing the keypress
In an input box or contenteditable=true div, how can I modify a keypress for the letter "a" to return a keybress for the letter "b"? I.e., every time you type the letter "a" in the div, the output is actually the letter "b".
I'm not that concerned with a solution that works in IE--just one that works in Safari, Chrome, & FF.
In Chrome, I can see that a keypress event has the properties "charCode", "keyCode", and "which", all of which get assigned the keypress event number. If I fire an event on a keypress, I can modify these values, but I can't figure out what to return so that the actual key that gets typed is different. For example:
$(window).keypress(function(e){ //$(window) is a jQuery object
e.charCode = 102;
e.which = 102;
e.keyCode = 102;
console.log(e);
return e;
});
I can also see that along with charCode, which, and keyCode, there is also an "originalEvent" property which in turn also has these properties. However, I haven't been able to modify those (I tried with things like e.originalEvent.charCode = 102).
You can't change the character or key associated with a key event, or fully simulate a key event. However, you can handle the keypress yourself and manually insert the character you want at the current insertion point/caret. I've provided code to do this in a number of places on Stack Overflow. For a contenteditable
element:
- Need to set cursor position to the end of a contentEditable div, issue with selection and range objects
Here's a jsFiddle example: http://www.jsfiddle.net/Ukkmu/4/
For an input:
Can I conditionally change the character entered into an input on keypress?
show different keyboard character from the typed one in google chrome
Cross-browser jsFiddle example: http://www.jsfiddle.net/EXH2k/6/
IE >= 9 and non-IE jsFiddle example: http://www.jsfiddle.net/EXH2k/7/
My solution example (change in input[type=text]
the character ','
to '.'
):
element.addEventListener('keydown', function (event) {
if(event.key === ','){
setTimeout(function() {
event.target.value += '.';
}, 4);
event.preventDefault();
};