js keyboard event keydown event to prevent repeated triggering
There are three main types of keyboard events: keydown, keypress(not recommended, some browsers have abandoned it)keyup.
Add normal keyboard keydown event
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
// 输出按下的键的键码
console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
});
However, this event will be triggered repeatedly if the key is not released . How to stop it?
Prevent keydown event from triggering repeatedly
①Use a flag variable to track the status of the button
let keyDownFlag = false;
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
if (!keyDownFlag) {
keyDownFlag = true;
console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
}
});
// 监听键盘释放事件
document.addEventListener('keyup', function() {
keyDownFlag = false;
});
②Judge by the attributes of the event.
repeatThe attributes can be used to judge whether the keyboard event is continuously triggered by the key being kept pressed.
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
if (!event.repeat) {
console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
}
In this example, the event.repeat property is used to check whether the event was triggered by a key being held down. If event.repeat is false, it means that this is a new key event, not a continuously triggered event.
How to use component keys
Component keys are generally triggered through the keydown event.
document.onkeydown = function (oEvent) {
console.log(oEvent);
}
You can see that a lot of information is returned in the event object. The keycode attribute contains a code, which is the corresponding ASCII code on the keyboard, typethe type of event that is triggered, etc...
Here we have several attributes that we can use, namely altkeyattributes and ctrlkeyattributes and shiftkey. They represent the judgment of event triggering by the alt, ctrl, and shift keys on the keyboard. When events are triggered by these keys, their values will become true.
Then I can listen to keyboard events through the above content combined with these properties.
- For example, you want to listen to the combination event of ctrl + s
document.onkeydown = functionb(oEvent) {
var oEvent = oEvent || window.oEvent;
//获取键盘的keyCode值
var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
//获取ctrl 键对应的事件属性
var bCtrlKeyCode = oEvent.ctrlKey || oEvent.metaKey;
if( oEvent.nKeyCode == 83 && bCtrlKeyCode ) {
alert('save');
//doSomeThing...
}
}
- For example, you want to listen to the combination event of Alt+q
document.onkeydown = functionb(e) {
if(e.altKey && e.keyCode == 81){
if(e.repeat){
return
}
//todo somethink
}
}
Although the operation of a Mac computer is different from that of an ordinary Windows computer, it does not mean that there is no alt key. It is not difficult to find the alt key on a Mac computer. The option key in the lower left corner of the keyboard is actually Apple’s alt key. The control key next to it corresponds to the ctrl key of the PC computer. The command key corresponds to the win key.