I am trying to listen to a keydown and keyup event in a web app and need to retrieve the key. On desktop, this works fine with the following code.
const inputElement = document.querySelector("input");
const keydownList = document.getElementById("keydownList");
const keyupList = document.getElementById("keyupList");
inputElement.addEventListener("keydown", (e) => {
const li = document.createElement("li");
li.innerText = e.key;
keydownList.appendChild(li);
});
inputElement.addEventListener("keyup", (e) => {
const li = document.createElement("li");
li.innerText = e.key;
keyupList.appendChild(li);
});<h2>Input</h2>
<input type="text">
<h2>Keydown</h2>
<ul id="keydownList"></ul>
<h2>Keyup</h2>
<ul id="keyupList"></ul>The problem is that on mobile this does not work (at least, I tested on Android). Firefox just outputs "Process" every time instead of the key, and Chrome outputs "Unidentified". The same applies to the corresponding jquery version of the code.
How can one fix this? (I have tried to do some research on this, but was not able to find a solution.)