关键实现要点:
- 使用keydown事件而非keypress,确保所有按键可捕获
- 通过event.key替代已废弃的keyCode属性
- 中文输入法需配合composition事件处理
- 推荐使用事件委托优化多元素监听
以下两个代码块是使用js写的,分别存到两个js文件中,可以写个html尝试运行。
// 方向键+WASD监听方案
document.addEventListener('keydown', (e) => {
const directionMap = {
'ArrowUp': '↑', 'w': '↑',
'ArrowRight': '→', 'd': '→',
'ArrowDown': '↓', 's': '↓',
'ArrowLeft': '←', 'a': '←'
};
if (directionMap[e.key]) {
console.log(`方向指令: ${directionMap[e.key]}`);
// 执行对应方向操作
}
// ESC键处理
if (e.key === 'Escape') {
console.log('退出当前操作');
}
});
带输入法支持的文本输入
const inputField = document.getElementById('text-input');
inputField.addEventListener('compositionstart', () => {
console.log('开始中文输入');
});
inputField.addEventListener('compositionend', (e) => {
console.log(`最终输入: ${e.data}`);
});