How to differentiate capital letters from lower ones in onkeydown event handler method

javascript onkeydown

19,739

Solution 1

It looks to me like you answered your own question. If you are detecting the SHIFT key, you can easily differentiate between capital and lowercase:

if(e.shiftKey){
   alert("You pressed a CAPITAL letter with the code " + e.keyCode);
}else{
   alert("You pressed a LOWERCASE letter with the code " + e.keyCode);
}

Or am I misunderstanding your question?

Update: Upper case ASCII codes can easily be converted to lower case ASCII codes by adding 32, so all you need to do is this:

<html>
<head>
<title>Test</title>

<script type="text/javascript">

function showChar(e){
  if(e.keyCode!=16){ // If the pressed key is anything other than SHIFT
        if(e.keyCode >= 65 && e.keyCode <= 90){ // If the key is a letter
            if(e.shiftKey){ // If the SHIFT key is down, return the ASCII code for the capital letter
                alert("ASCII Code: "+e.keyCode);
            }else{ // If the SHIFT key is not down, convert to the ASCII code for the lowecase letter
                alert("ASCII Code: "+(e.keyCode+32));
            }
        }else{
            alert("ASCII Code (non-letter): "+e.keyCode);
        }
  }
}

</script>
</head>

<body onkeydown="showChar(event);">
<p>Press any character key, with or without holding down
 the SHIFT key.<br /></p>
</body>
</html>

Update 2: Try this:

<html>
<head>
<title>Test</title>

<script type="text/javascript">

function showChar(e){
  if(e.keyCode!=16){ // If the pressed key is anything other than SHIFT
        c = String.fromCharCode(e.keyCode);
        if(e.shiftKey){ // If the SHIFT key is down, return the ASCII code for the capital letter
            alert("ASCII Code: "+e.keyCode+" Character: "+c);
        }else{ // If the SHIFT key is not down, convert to the ASCII code for the lowecase letter
            c = c.toLowerCase(c);
            alert("ASCII Code: "+c.charCodeAt(0)+" Character: "+c);
        }
  }
}

</script>
</head>

<body onkeydown="showChar(event);">
<p>Press any character key, with or without holding down
 the SHIFT key.<br /></p>
</body>
</html>

Solution 2

More recent and much cleaner: use event.key. No more arbitrary number codes!

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
    if (/^[a-z]$/i.test(key)) { // or if (key.length === 1 && /[a-z]/i.test(key))
        const isCapital = event.shiftKey;
    }
});

Mozilla Docs

Supported Browsers

19,739

Valentina Tatya

Updated on April 26, 2022

Comments

Valentina Tatya about 2 years

<html>
<head>
<title>Test</title>

<script type="text/javascript">

function showChar(e) {
    if (e.keyCode != 16) {
        alert(
           "keyCode: " + e.keyCode + "\n"
          + "SHIFT key pressed: " + e.shiftKey + "\n"
        );
    }
}

</script>
</head>

<body onkeydown="showChar(event);">
<p>Press any character key, with or without holding down
 the SHIFT key.<br /></p>
</body>
</html>

How can I differentiate capital A from lowercase a in onkeydown event handler method? Above algorithm fires the same keyCode value. I need to detect the capital letters when they are pressed in onkeydown.

Note: The code contains an exception for SHIFT key. Otherwise it does not allow to type capital letters. BTW, I need to use onkeydown for my trial.

Valentina Tatya almost 14 years

But should not the keyCode change, too? I need to get the difference from keyCode or something else as a value. In both examples the keyCode is same. I seek a way that provides a different keyCodes for capital A and lowercase a pressed.
Computerish almost 14 years

Take a look at the update to my answer above. I think that's what you are looking for.
Valentina Tatya almost 14 years

Thanks that is pretty close to my need. But how can I add support to UTF-8? Say for capital Ü and smallcase ü throws the "ASCII Code (non-letter)" alert. Is it possible to differentiate Unicode captial latters from smallcase letters in onkeydown.
Computerish almost 14 years

I added some more code. I don't know if that will work, but it might.
Windows programmer almost 14 years

The reason that the keyCode is a keyCode instead of a character code is that the keyCode is a keyCode representing which KEY is pressed. The key by itself doesn't say whether the character will be uppercase or numeric or punctuation or whatever. Also the key by itself doesn't say whether CAPS LOCK is active, but if CAPS LOCK is active then the presence of a Shift key bit will indicate the opposite of what this code is doing.
Computerish almost 14 years

Windows programmer is correct, but I am not aware of a way to detect the CAPS LOCK key in JavaScript. If caps lock support is required, you would be better off having the user type into a text box and checking what they type.
Valentina Tatya almost 14 years

Computerish, it partially works but I think that is the best solution that can be achieved. Thanks for your help.
Zesty almost 5 years

What about the CAPS lock?
Zesty almost 5 years

What about the CAPS lock?