Change default key action JavaScript

Question

Possible Duplicate:
How do I replace a keystroke with jQuery?

Is there a way where I can change the default character of a key pressed in JavaScript. Like if somebody presses the "E" Button, it will print out a p instead, and this is live, so like its being typed into a textarea. Anyway to do this with jQuery or anything like that? Thnaks!

@Bryan: While this question is very similar to the linked question, the linked one had no real solution. This question has a simple solution (see my answer below). — N Rohler, Oct 20 '11 at 23:41

score 2 · Accepted Answer · edited May 23 '17 at 12:19

2

Here is a complete example of a working solution, based on this answer:

jQuery.fn.extend({
    insertAtCaret: function(myValue) {
        return this.each(function(i) {
            if (document.selection) {
                //For browsers like Internet Explorer
                this.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
            }
            else if (this.selectionStart || this.selectionStart == '0') {
                //For browsers like Firefox and Webkit based
                var startPos = this.selectionStart;
                var endPos = this.selectionEnd;
                var scrollTop = this.scrollTop;
                this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
                this.focus();
                this.selectionStart = startPos + myValue.length;
                this.selectionEnd = startPos + myValue.length;
                this.scrollTop = scrollTop;
            } else {
                this.value += myValue;
                this.focus();
            }
        })
    }
});

$(function() {
    var ta = $('<textarea id="ta" style="width: 400px; height: 200px;"></textarea>').appendTo('body');
    ta.keypress(function(e) {
        if (e.which == 101) // e
        {
            e.preventDefault();
            ta.insertAtCaret('P');
        }
    });
});

edited May 23 '17 at 12:19

Community

1
1

answered Oct 20 '11 at 23:38

N Rohler

4,595
24
20

Thank you. However does TA need to be appended to body, or can I use a traditional prexcisitng selecot? – comu Oct 21 '11 at 03:05
@JonahAllibone: No need to append; that was just for the demo. You can use e.g. `var ta = $('#ta');` – N Rohler Oct 21 '11 at 15:21
I recently tried doing this, and It didn't work. Nothing happens. It does the normal – comu Oct 23 '11 at 19:02
Do you have textarea with `id="ta"` ? If not, you need to create one. Please post a fiddle link if you still have trouble. – N Rohler Oct 23 '11 at 19:37
I realized that I was assuming this would also work on a contentEditable div, but it appears that the browser treats contentEdiable div selections different from that of textarea selections. If you have a solution for that please post it! haha – comu Oct 23 '11 at 20:09
@JonahAllibone: "have a solution"? Not off-hand, but 1 Google + paste yields: http://jsfiddle.net/D38Jq/ (note linked topic here on StackOverflow). Only thing missing is updating the caret position. – N Rohler Oct 24 '11 at 00:57

score 1 · Answer 2 · answered Oct 20 '11 at 22:34

Check out this framework for adding keyboard shortcuts.

http://www.openjs.com/scripts/events/keyboard_shortcuts/

Of course it won't automatically convert any keypress to another character and output that character, you will have to figure out what part of the page has focus, for instance a text field, and modify it's value with what ever character you actually want to be inputed.

Change default key action JavaScript

2 Answers2