I need to get the pressed "key" from the keydown event:
const logEl = document.getElementById('log');
document.body.addEventListener('keydown', e => {
logEl.innerText += `key: ${e.key}, keyCode: ${e.keyCode}, isComposing: ${e.isComposing}\n`;
});#log { font-family: monospace; }<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>KeyDown</title></head>
<body>
<input type="text" spellcheck="false">
<div id="log"></div>
</body>
</html>It works just fine on desktop; e.g. entering abc generates the following:
key: a, keyCode: 65, isComposing: false
key: b, keyCode: 66, isComposing: false
key: c, keyCode: 67, isComposing: false
But on mobile, it behaves weirdly; I expect the same output on the mobile, but entering the same abc through Chrome v110 on Android results in:
key: Unidentified, keyCode: 229, isComposing: false
key: Unidentified, keyCode: 229, isComposing: false
key: Unidentified, keyCode: 229, isComposing: false
As you can tell, the key and keyCode properties, respectively report the values of Unidentified and 229 (for all entries)!
So, how to get the same behavior encountered on desktop to also occur on mobile?
I've event set the spellcheck="false" on the <input> element to no avails!. Also, I cannot utilize the input event on the <input>, since the implementation is dependent upon the "key" values that are normally reported on keydown events.)
