CODEWITHSUNDEEP
javascriptjquery
assaqqaf
assaqqaf

Reputation: 1585

How do I use the Keydown event to get the correct character in multiple languages/keyboard layouts?

I use keydown event in jquery, but the problem it's stateless for input language. It's can't determine the input is in English language or in Hebrew or Arabic...? it returns only keycode, and I can't get character.

Is there any solution??

Upvotes: 5

Views: 3483

Answers (2)

Sina Farhadi
Sina Farhadi

Reputation: 785

Dmytro's approach is currently considered deprecated, as indicated in the official Mozilla documentation (https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which). Unfortunately, relying on it may not be the best choice.

A more modern and recommended approach is to utilize the event.code method to achieve the same result, specifically capturing the "KeyM" key press:

body.addEventListener("keydown", (e) => {
  if (e.code === "KeyM") {
    // The 'M' key has been pressed
  }
})

By embracing this method, you ensure compatibility and adhere to the latest best practices in web development.

Upvotes: 0

Dmytro Shevchenko
Dmytro Shevchenko

Reputation: 34581

To determine the actual character, you should use the keypress event instead of keydown. While keydown provides you with a key code, keypress indicates the character which was entered by the user.

Another difference is that when the user presses and holds a key, a keydown event is triggered only once, but separate keypress events are triggered for each inserted character.

Here's an example of using the keypress event:

<body>
<form>
  <input id="target" type="text" />
</form>

<script src="http://api.jquery.com/scripts/events.js"></script>
<script>
  $("#target").keypress(function(event) {
    var charCode = event.which; // charCode will contain the code of the character inputted
    var theChar = String.fromCharCode(charCode); // theChar will contain the actual character
  });
</script>
</body>

Upvotes: 7

Related Questions