JSFiddle - React, Tailwind, and code Playground
HTML
Type in here and hold down a key:
<br>
<input type="text" id="my_textbox">
JavaScript
var textBox = document.getElementById("my_textbox");
var lastKeyDown, keyIsPressed = {}, keyCodeForCharCode = {},
charCodeForKeyCode = {};
textBox.onkeydown = function(evt) {
evt = evt || window.event;
lastKeyDown = evt.keyCode;
};
textBox.onkeyup = function(evt) {
evt = evt || window.event;
var charCode = charCodeForKeyCode[evt.keyCode];
if (charCode) {
keyIsPressed[charCode] = false;
}
};
textBox.onkeypress = function(evt) {
evt = evt || window.event;
var keyCode, charCode = evt.which || evt.keyCode;
if (keyIsPressed[charCode]) {
// This keypress is an autorepeat
return false;
} else {
keyIsPressed[charCode] = true;
// Get the key code for the corresponding keydown event
keyCode = keyCodeForCharCode[charCode];
if (!keyCode) {
// Create two-way mapping for keyCode and charCode
keyCodeForCharCode[charCode] = lastKeyDown;
charCodeForKeyCode[lastKeyDown] = charCode;
}
}
};