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

问题

<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.

回答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>

回答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

回答3:

I did quite a bit of searching on this question, as I was writing code to limit an input element (using the keyPress event) to alpha characters only. I was using "character codes between 65 and 90" and could not enter lowercase letters in the field.

I finally discovered that JavaScript is using ASCII codes for this, so I just added "and also between 97 and 122" and viola! I'm able to enter both upper and lower case letters. To wit:

function alphaOnly(e) {
    'use strict';
    if (!e) { // compensates for IE's key code reporting.
        e = window.event;
    }
    var charCode = (e.which) ? e.which : event.keyCode;
    if ((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122)) {
        return true;
    } else {
        return false;
    }
}

来源：https://stackoverflow.com/questions/3125727/how-to-differentiate-capital-letters-from-lower-ones-in-onkeydown-event-handler

标签

javascript

onkeydown