I have set up a keyboard on my website where you can click on a key to type a letter. When i access the site on my phone and try to type a word, it misses out keys because it won't allow for buttons to be pressed that quickly.
Is there a way to allow this? an example would be in wordle: https://www.powerlanguage.co.uk/wordle/ where the buttons can be pressed in quick succession
my website uses react if that helps
In the case in which you cannot "move" the text cursor (as it happens in wordle), you could consider using this combination of event listeners, intervals and queue-like array structures:
HTML:
<div class="output"></div>
...
<button type="button" class="letter"> Q </button>
<button type="button" class="letter"> W </button>
<button type="button" class="letter"> E </button>
...
<button type="button" class="letter"> ← </button>
JS:
let word = [ ];
document.querySelectorAll(".letter").forEach(
el => el.addEventListener("click", ev => {
word.push(el.innerText.trim());
})
);
setInterval(() => {
if(word.length) {
let char = word.shift();
if(char == "←") document.querySelector(".output").innerText = document.querySelector(".output").innerText.slice(0, -1);
else document.querySelector(".output").innerText += char;
}
}, 50);
Ok, I figured out the issue. I was using divs with an "onClick" property. When i switched them to buttons the problem was gone.