How to listener the keyboard type text in Javascript?

javascript events dom-events

24,265

Solution 1

To do it document-wide, use the keypress event as follows. No other currently widely supported key event will do:

document.onkeypress = function(e) {
    e = e || window.event;
    var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
    if (charCode) {
        alert("Character typed: " + String.fromCharCode(charCode));
    }
};

For all key-related JavaScript matters, I recommend Jan Wolter's excellent article: http://unixpapa.com/js/key.html

Solution 2

I use jQuery to do something like this:

$('#searchbox input').on('keypress', function(e) {

    var code = (e.keyCode ? e.keyCode : e.which);
  if(code == 13) { 
           //Enter keycode
     //Do something
  }

});

EDIT: Since you're not binding to text box use:

$(window).on('keypress', function(e) {

    var code = (e.keyCode ? e.keyCode : e.which);
  if(code == 13) { 
           //Enter keycode
     //Do something
  }

});

http://docs.jquery.com/Main_Page

24,265

Author by

Tattat

Updated on July 09, 2022

Comments

Tattat almost 2 years

I want to get the keyboard typed text, not the key code. For example, I press shift+f, I get the "F", instead of listen to two key codes. Another example, I click F3, I input nothing. How can I know that in js?
Tattat over 13 years

But the user won't type on a text box.
Tattat over 13 years

but it don't know the when the user use other typing method, for example, chinese.
Chris W. Rea over 13 years

So .. to be clear: You're not going to be using a text box (or text area), yet you want to be able to process the resulting character the user has typed on your web page, and it may be a character resulting from an Input Method Editor (IME) .. challenging.
Chris W. Rea over 13 years

Nice resource - I'm bookmarking it. In this particular context, however, some mention of how things work (or don't) with Input Method Editors (IME) would be helpful.
Ruan Mendes over 13 years

I hope I didn't make it sound like I wrote that article.
Tim Down over 13 years

Do not use the keydown event for retrieving character information. It's simply not possible to do it reliably. Use keypress instead.
Chris W. Rea over 13 years

Well, the article does have the author's (Jan Wolter) name on it, so it's clear from that perspective it isn't your article, but in your answer it says "This is my definitive reference ..." .. which can be interpreted that way ;-)
Chris W. Rea over 13 years

Will this work when the user employs an Input Method Editor (IME)?
Tim Down over 13 years

@Chris: I've no idea. How does the IME you have in mind interact with a form control on a web page?
Chris W. Rea over 13 years

I'm just mentioning another requirement the OP dropped in a comment (see my answer).
Chris W. Rea over 13 years

@Tattat I don't think IME will work with keypress events. Some evidence: bugs.dojotoolkit.org/ticket/3156 .. refer to the change history part: "Characters input by an IME trigger the compositionEnd event. The reason it doesn't make sense to use the onkeypress event (besides that browsers don't work that way) is that IME's let you input a series of characters (typically two characters), so the onkeypress event has no way of representing that two characters were input. Onkeypress is for a single character only."
Chris W. Rea over 13 years

@Tattat So... perhaps look at the compositionEnd event? I don't have any guidance to offer on that, however. But, best of luck.