当前位置：首页 > JavaScript

js实现keydown

2026-03-14 15:12:48JavaScript

监听键盘事件

在JavaScript中，可以通过addEventListener方法监听键盘事件。keydown事件在用户按下键盘上的任意键时触发，无论该键是否产生字符值。

document.addEventListener('keydown', function(event) {
    console.log('Key pressed:', event.key);
});

获取按键信息

事件对象event包含多个属性，用于获取按键的详细信息：

js实现keydown

event.key：返回按键的字符串表示（如 "a"、"Enter"）。
event.code：返回按键的物理键码（如 "KeyA"、"Enter"）。
event.which 或 event.keyCode：返回按键的ASCII码（已弃用，建议使用key或code）。

document.addEventListener('keydown', function(event) {
    console.log('Key:', event.key);
    console.log('Code:', event.code);
});

阻止默认行为

某些按键会触发浏览器的默认行为（如空格键滚动页面）。可以通过event.preventDefault()阻止默认行为。

js实现keydown

document.addEventListener('keydown', function(event) {
    if (event.key === ' ') {
        event.preventDefault();
        console.log('Spacebar pressed, default behavior prevented');
    }
});

组合键检测

通过检查event.ctrlKey、event.shiftKey、event.altKey和event.metaKey属性，可以检测是否按下了组合键。

document.addEventListener('keydown', function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('Ctrl+S pressed');
    }
});

动态焦点控制

通过监听keydown事件，可以实现动态焦点切换或其他交互逻辑。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
        event.preventDefault();
        console.log('Tab key pressed, custom focus handling');
    }
});