一、key和keys的区别
键盘事件中经常会出现key和keys这两个术语,它们之间的区别是:key表示按下的是哪个键,而keys表示同时按下的多个键的组合情况。
例如:
// 键盘事件中获取到按下的键值
document.addEventListener('keydown', function(event) {
console.log(event.key);
});
// 键盘事件中获取到同时按下的键值组合
document.addEventListener('keydown', function(event) {
console.log(event.keys);
});
以上代码中,在keydown事件中,通过监听event.key可以获取到按下的具体键值,同时监听event.keys可以获取到当前按下的多个键值组合(当按下shift、ctrl、alt、meta键时)。
二、keydown是什么事件
keydown事件在按下键盘上的任意一个键时触发,常用于实现在输入框中监听按键输入的操作。
例如:
var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
if (event.key === 'Enter') { // 当按下Enter键时
console.log('你按下了Enter键');
}
});
以上代码中,在监听输入框的keydown事件时,判断按下的键值是否为Enter,从而实现相应的操作。
三、keyone和key2区别
keyone和key2并不是键盘事件中的术语,这里假设指的是在键盘事件中的key和keyCode这两个属性。
key是事件属性,表示按下的是哪个键,keyCode是事件属性,表示按下的是哪个键的键码值。
例如:
var input = document.querySelector('input');
input.addEventListener('keydown', function(event) {
console.log(event.key); // 按下的键
console.log(event.keyCode); // 按下的键的keyCode
});
以上代码中,通过监听输入框的keydown事件,分别通过event.key和event.keyCode来获取到按下的键和键码值。
四、输入框中获取按键输入
在输入框中获取按键输入的功能在实际开发中非常常见,它可以通过监听输入框的keydown或keyup事件来实现。
例如:
var input = document.querySelector('input');
input.addEventListener('keyup', function(event) {
console.log(input.value); // 获取输入框中的值
});
以上代码中,在监听输入框的keyup事件时,通过input.value来获取输入框中的值,从而实现获取按键输入的操作。
五、阻止默认事件
在一些情况下,我们需要阻止默认的键盘事件,例如阻止按下Backspace键时浏览器自动返回历史记录。
可以通过event.preventDefault()来阻止事件的默认行为。
例如:
document.addEventListener('keydown', function(event) {
if (event.key === 'Backspace') {
event.preventDefault();
}
});
以上代码中,在监听document的keydown事件时,判断按下的键是否为Backspace,如果是则通过event.preventDefault()阻止浏览器自动返回历史记录。
六、总结
keyup和keydown是常用的键盘事件,它们分别在释放按键和按下按键时触发,常用于实现输入框的输入、阻止默认键盘事件等功能。
在使用键盘事件时,需要注意key和keyCode、key和keys之间的区别,根据具体的需求选择相应的事件和属性。