How to find out what character key is pressed?

Question

I would like to find out what character key is pressed in a cross-browser compatible way in pure Javascript.

Solution 1

"Clear" JavaScript:

function myKeyPress(e){
  var keynum;

  if(window.event) { // IE                  
    keynum = e.keyCode;
  } else if(e.which){ // Netscape/Firefox/Opera                 
    keynum = e.which;
  }

  alert(String.fromCharCode(keynum));
}

<input type="text" onkeypress="return myKeyPress(event)" />

JQuery:

$("input").keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

Solution 2

There are a million duplicates of this question on here, but here goes again anyway:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

The best reference on key events I've seen is http://unixpapa.com/js/key.html.

Solution 3

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

NOTE: The old properties (.keyCode and .which) are Deprecated.

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

If you want to make sure only single characters are entered, check key.length === 1, or that it is one of the characters you expect.

Mozilla Docs

Supported Browsers

Solution 4

Try:

<table>
  <tr>
    <td>Key:</td>
    <td id="key"></td>
  </tr>
  <tr>
    <td>Key Code:</td>
    <td id="keyCode"></td>
  </tr>
  <tr>
    <td>Event Code:</td>
    <td id="eventCode"></td>
  </tr>
</table>
<script type="text/javascript">
  window.addEventListener("keydown", function(e) {
    //tested in IE/Chrome/Firefox
    document.getElementById("key").innerHTML = e.key;
    document.getElementById("keyCode").innerHTML = e.keyCode;
    document.getElementById("eventCode").innerHTML = e.code;
  })
</script>

*Note: this works in "Run code snippet"

This website does the same as my code above: Keycode.info

Solution 5

Use this one:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

View more solutions

Comments

[VoVaVc]

this works ok for alphabetic chars, but what about dots/brakets and other typogtaphic symbols?

[Tim Down]

@VoVaVc: It works for those too. The crucial thing is using the keypress event, which gives you a character code, rather than keyup or keydown which give you a key code.

[Chris F Carroll]

Isn't this a near-exact duplicate of @Coyod's 2009 answer?

[aljgom]

e.which is deprecated. Use e.key instead, as in if(e.key == 'z')

[Kelderic]

@aljgom, e.key still doesn't have full browser support.

[Curtis]

Doesn't work for symbols that you have to press shift to make, like !

[Ray]

@AndyMercer key is now supported by all major browsers: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

[Zuabi]

The keypress event seems to be deprecated w3.org/TR/DOM-Level-3-Events/#event-type-keypress

[merrybot]

Is this for node.js?

[Gibolt]

No, node just means any DOM element. If you had Node.js connecting to a UI, I suppose it would work

[Irrmich]

Uncaught TypeError: Mousetrap.record is not a function at recordSequence (****.html:12) at HTMLButtonElement.onclick (****.html:20)

[Angelotti]

keydown for some mobile device doesn't work it return undefine

[Danziger]

Here's another similar site but with a few additional options: keyjs.dev

[Paolo Benvenuto]

on chrome, xfce, italian keyboard, spanish layout, pressing "<" returns "/", which is the key which is there in english keyboard. Why?!? some chrome versions ago it was not that!

[MindRoasterMir]

two negative votes but now explaination why it is voted negative. I think it help when you comment what is the problem with this answer. thanks

[gomozor]

easy to vote, I guess you bettter try this snippet on your own :) title is pretty common by the way