Reacting to user pressing keys.
At least on 8110, the only keys that appear repeated in events are the arrow keys (D-Pad). These will have the event.repeat
set accordently.
Other keys can be emulated.
Here is a way of doing it.
const KEYDELAY = 1000; /* ms to start repeating */
const KEYINTERVAL = 40; /* ms between repetitions */
const KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
const keystate = {};
document.addEventListener('keydown', function(event) {
if (KEYS.indexOf(event.key) !== -1 && !(event.key in keystate)) {
keystate[event.key] = {
ts: Date.now(),
delay: setTimeout(function() {
keystate[event.key].interval = setInterval(function() {
// key is being holding, repeating
}, KEYINTERVAL);
}, KEYDELAY),
interval: null,
};
}
});
document.addEventListener('keyup', function(event) {
if (KEYS.indexOf(event.key) !== -1 && event.key in keystate) {
if (keystate[event.key].delay) {
clearTimeout(keystate[event.key].delay);
}
if (keystate[event.key].interval) {
clearInterval(keystate[event.key].interval);
}
const keyts = keystate[event.key].ts;
delete keystate[event.key];
if (Date.now() >= keyts + KEYDELAY) {
// key was looong-pressed
return;
}
}
// key was normal pressed
});
To know if the user is loooong-pressing a key, you could set a timeout on keydown
and cancel it on keyup
: so if the user press it longer that the timeout, it will be executed, if not cancelled.
This piece of code shows a "Mooo" alert whenever user holds Call key for more than 1 second:
var T = null;
document.onkeydown = event => {
if (event.key === "Call") {
T = setTimeout(() => {
alert("Mooo");
}, 1000);
}
}
document.onkeyup = event => {
if (event.key === "Call" && T) {
clearTimeout(T);
}
}
Imagine you need to do something rapidly with an interval in between as long as user holds some key. You should write a code similar to the "Holding key" section: Start an interval when keydown
and clear it on keyup
This code writes an increasing number every 100 miliseconds as long as user holds Call key:
var j = 0;
var I = null;
document.onkeydown = event => {
if (event.key === "Call") {
I = setInterval(() => {
document.write(i++);
}, 100);
}
}
document.onkeyup = event => {
if (event.key === "Call" && I) {
clearInterval(I);
}
}
keydown
and keyup
events.