keyup event always return uppercase letter

Question

I'm trying to write something similar to a 'placeholder' polyfill. I would like to catch the keyup event on an input field and get the char the user entered, so i have this code:

 $elem.on('keyup',function(e){  
    var $this = $(this),    
        val = $this.val(),
        code = (e.keyCode ? e.keyCode : e.which);
    console.log(String.fromCharCode(code));

});

The problem is this always returns an Uppercase version of the pressed char, how can i know if the pressed char was uppercase or lowercase?

I know keypress gives the pressed char but it does not activate on all keypress events (like backspace).

Usually Shift is pressed when typing an uppercase letter: http://www.java2s.com/Code/JavaScript/Event/Shiftkeypressed.htm — Hidde, Sep 24 '12 at 15:49
Here is a previous answer on this question - http://stackoverflow.com/a/2584099/1091745. — tdlm, Sep 24 '12 at 15:55
possible duplicate of http://stackoverflow.com/questions/8964390/jquery-keyup-issue — prashanth, Sep 24 '12 at 16:00

score 14 · Accepted Answer · answered Sep 24 '12 at 15:58

14

You can't easily get this information from keyup because keyup only knows which keys are being pressed, not which letters are being typed. You could check for the shift key being down and you could also try to track caps lock yourself, but if someone pressed it outside the browser, you'll end up getting the wrong case characters.

You could try the keypress event., though jQuery reports it does not always behave the same cross-browser. From the doc:

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

answered Sep 24 '12 at 15:58

Ed Bayiates

11,060
4
43
62

I already saw this but I thought maybe there is a way to avoid defining 2 event handlers, one for special keys like backspace and another for the rest. – Tomer Sep 24 '12 at 16:09
Unfortunately there isn't. As I point out while you can tell what state shift is in, you cannot accurately track the state of caps lock inside the browser. – Ed Bayiates Sep 24 '12 at 16:15
O.K, then the hard way it is :) – Tomer Sep 24 '12 at 16:20
just to add my recent findings: `keypress()` isn't fired ni chrome 35 for Android. – ProblemsOfSumit Dec 05 '14 at 09:18
This may have been fixed in Chrome 38. – Ed Bayiates Dec 05 '14 at 19:50
How could keydown or keyup be a better choice when they report the wrong charcodes? – pabrams Mar 16 '16 at 13:59
@pabrams, not sure what you mean, but for special keys like arrows they report correctly. The issue is if you want to know whether upper or lowercase letters/shifted numbers were typed. – Ed Bayiates Mar 16 '16 at 18:21
@Ed Bayiates Yeah that's what I mean - the wrong keycodes are reported (by keydown and keyup but not by keypress) for lowercase characters. So I don't get why "the doc" suggests that "Because of this distinction, [...] keydown() or keyup() [(which reports the wrong character codes)] is a better choice [than keypress(), which reports the correct character codes]". It seems to imply that it's only a better choice for 'special keystrokes such as arrow keys", but doesn't mention why (presumably, keypress also reports the correct codes for arrow keys, so why wouldn't I just always use keypress)? – pabrams Mar 16 '16 at 18:40
keypress doesn't always behave the same cross-browser. – Ed Bayiates Mar 16 '16 at 19:27

score 4 · Answer 2 · edited Oct 17 '17 at 01:03

keyup only knows the key being pressed, not additional conditions (in this case if its a lower/upper case). Try the keypress event instead (I've used document for the example to demonstrate - change it to the required element)

eg:

<script type="text/javascript">

$(document).on('keypress',function(e) {  
    var $this = $(this),    
        val = $this.val(),
        code = e.keyCode || e.which;
    console.log(String.fromCharCode(code));
});

</script>

score 2 · Answer 3 · answered Sep 24 '12 at 16:05

You will need to capture your key event a onkeypress so you can access the character code. Even if you wanted to detect a capslock / shift + keystroke, it would still register as two separate keystrokes making it difficult to determine uppper vrs lower case.

Some important KeyCode notes:

"Be careful when accessing the keyCode property during an onkeydown or onkeyup event, as it is set whenever any key is pressed, including non character keys like "Shift". This means if you try to press "Shift+a" to try and get the keyCode for "A", you will always end up getting two keyCodes instead, one for "Shift" and one for "A" in that order. What you won't get regardless is the keyCode for "a", as keyCode always returns the unicode value of the uppercase version of a character. To derive the keyCode for "a" (lowercase), you must probe the keyCode returned during the onkeypress event in IE, and since Firefox doesn't set keyCode during onkeypress, switch to e.charCode or e.which instead for that browser."

Some important CharCode notes:

"Returns the character code of the key pressed during an onkeypress event. and is only set for keys in which a character is associated with it (ie: "a", "b", or "z"). Keys with no character association like "Shift" or "Ctrl" do not qualify. Other points: - Different values are returned for upper and lowercase characters (ie: "a" versus "A")."

Here is a great source from which the two quotes came from which can most likely aid you with any further confusion.

Keycods and charcodes

score 0 · Answer 4 · answered Sep 24 '12 at 16:00

0

You can get the charcode on a keypress event and for "backspace",'insert' etc , you can use keydowns keyCode property.

answered Sep 24 '12 at 16:00

Rahul

1,549
3
17
35

keyup event always return uppercase letter

4 Answers4

Linked