How to know if .keyup() is a character key (jQuery)

Question

How to know if .keyup() is a character key (jQuery)

$("input").keyup(function() {

if (key is a character) { //such as a b A b c 5 3 2 $ # ^ ! ^ * # ...etc not enter key or shift or Esc or space ...etc
/* Do stuff */
}

});

Solution 1

Note: In hindsight this was a quick and dirty answer, and may not work in all situations. To have a reliable solution, see Tim Down's answer (copy pasting that here as this answer is still getting views and upvotes):

You can't do this reliably with the keyup event. If you want to know something about the character that was typed, you have to use the keypress event instead.

The following example will work all the time in most browsers but there are some edge cases that you should be aware of. For what is in my view the definitive guide on this, see http://unixpapa.com/js/key.html.

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Character was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyup and keydown give you information about the physical key that was pressed. On standard US/UK keyboards in their standard layouts, it looks like there is a correlation between the keyCode property of these events and the character they represent. However, this is not reliable: different keyboard layouts will have different mappings.

---

The following was the original answer, but is not correct and may not work reliably in all situations.

To match the keycode with a word character (eg., a would match. space would not)

$("input").keyup(function(event)
{ 
    var c= String.fromCharCode(event.keyCode);
    var isWordcharacter = c.match(/\w/);
}); 

Ok, that was a quick answer. The approach is the same, but beware of keycode issues, see this article in quirksmode.

Solution 2

You can't do this reliably with the keyup event. If you want to know something about the character that was typed, you have to use the keypress event instead.

The following example will work all the time in most browsers but there are some edge cases that you should be aware of. For what is in my view the definitive guide on this, see http://unixpapa.com/js/key.html.

$("input").keypress(function(e) {
    if (e.which !== 0) {
        alert("Charcter was typed. It was: " + String.fromCharCode(e.which));
    }
});

keyup and keydown give you information about the physical key that was pressed. On standard US/UK keyboards in their standard layouts, it looks like there is a correlation between the keyCode property of these events and the character they represent. However, this is not reliable: different keyboard layouts will have different mappings.

Solution 3

I'm not totally satisfied with the other answers given. They've all got some kind of flaw to them.

Using keyPress with event.which is unreliable because you can't catch a backspace or a delete (as mentioned by Tarl). Using keyDown (as in Niva's and Tarl's answers) is a bit better, but the solution is flawed because it attempts to use event.keyCode with String.fromCharCode() (keyCode and charCode are not the same!).

However, what we DO have with the keydown or keyup event is the actual key that was pressed (event.key). As far as I can tell, any key with a length of 1 is a character (number or letter) regardless of which language keyboard you're using. Please correct me if that's not true!

Then there's that very long answer from asdf. That might work perfectly, but it seems like overkill.

---

So here's a simple solution that will catch all characters, backspace, and delete. (Note: either keyup or keydown will work here, but keypress will not)

$("input").keydown(function(event) {

    var isWordCharacter = event.key.length === 1;
    var isBackspaceOrDelete = event.keyCode === 8 || event.keyCode === 46;

    if (isWordCharacter || isBackspaceOrDelete) {
        // do something
    }
});

Solution 4

This helped for me:

$("#input").keyup(function(event) {
        //use keyup instead keypress because:
        //- keypress will not work on backspace and delete
        //- keypress is called before the character is added to the textfield (at least in google chrome) 
        var searchText = $.trim($("#input").val());

        var c= String.fromCharCode(event.keyCode);
        var isWordCharacter = c.match(/\w/);
        var isBackspaceOrDelete = (event.keyCode == 8 || event.keyCode == 46);

        // trigger only on word characters, backspace or delete and an entry size of at least 3 characters
        if((isWordCharacter || isBackspaceOrDelete) && searchText.length > 2)
        { ...

Solution 5

If you only need to exclude out enter, escape and spacebar keys, you can do the following:

$("#text1").keyup(function(event) {
if (event.keyCode != '13' && event.keyCode != '27' && event.keyCode != '32') {
     alert('test');
   }
});

See it actions here.

You can refer to the complete list of keycode here for your further modification.

View more solutions

Comments

[hluk]

On Firefox keyCode for F1 key and P keys is the same (also F2 is 'q', F3 is 'r' etc.). On Chromium (Webkit browser) F1 is 'P', F2 is 'Q' etc.

[Tim Down]

You can't get the character typed reliably from the keyup event. This may work on your keyboard but for different keyboard types and different cultures there are no guarantees at all.

[Christian]

If @TimDown's point wasn't clear enough, here's another one: this is basically the wrong answer.

[Nivas]

@Christian agreed. I had answered this almost 2 years ago. Now when I look at it I know this is wrong. I don't even remember what I was thinking when I wrote this. I am unable to delete this as this is the accepted answer (but would be glad to if a Mod can help)

[Christian]

I wouldn't delete it, it's still an answer. But sadly it seems mods aren't much proactive about the issue.

[Ian Campbell]

I just encountered a similar problem, where I was not able to detect and disable the ENTER key with keyup, but I was able to do this with keypress.

[Ryan Taylor]

@IanCampbell keydown would have worked too. It's because with keyup the enter button has already been pressed and received before the key was lifted up.

[spirytus]

IMO mods should focus on getting this sort of answers fixed and put in right place rather than policing around and marking questions "unconstructive". I've seen many "unconstructive" questions voted up hundreds times which obviously means people find these helpful. BTW I appreciate the time you put in answering

[danielson317]

The keypress event isn't fully reliable. In chrome, If you highlight a character and type a new character over it no keypress event is triggered.

[danielson317]

@TimDown Looks like you are right. I had a conflicting event that would cancel the keypress by accident. thanks for setting me straight.

[fdaugan]

Also works with copy/paste CTRL+C/CTRL+V. Much simple condition : String.fromCharCode(e.keyCode).match(/\w/) || e.keyCode === 8 || e.keyCode === 46

[HankScorpio]

Small bug here. You're using String.fromCharCode, but inputting event.keyCode. Should be event.charCode. However, event.charCode is always 0 for the keyUp event (in Chrome, at least). This answer is flawed. If you inspect the variable c you'll see that it doesn't equate to the key that was pressed.

[gdpelican]

I really disliked this answer when I first read it, but then gave it a go and it works wonderfully.

[Jonathan Andersson]

FYI e.which is deprecated developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

[nnn]

beautiful solution: isWordCharacter = event.key.length === 1

[Toskan]

keypress doesnt work on android.... so keypress is not even an option in the first place

[Toskan]

keypress doesnt work on android.... so keypress is not even an option in the first place

[Bing]

WARNING: While keypress may still be the "better" answer here, the value is not rendered when the keypress triggers the way it is for keyup. Fiddle: jsfiddle.net/myingling/57ht0ys8/1

[Tim Down]

@Bing: True but not really relevant to this question. Makes sense when you consider that when the keypress event is raised, the typing effect can still be prevented by calling preventDefault() on the event. If you want an event fired after the character has been inserted, you may want input event, although this is fired for any input, not just via keystrokes.

[Bing]

@TimDown Given that the question specifically asked about the keyup function this seemed a very important distinction. Especially for those not familiar with the jQuery event orders (for example someone who go here by searching Google specifically for keyup). Understand and agreed there are ways to work around it, but the order of execution differing can certainly complicate those work-arounds.