0
点赞
收藏
分享

微信扫一扫

前端获取键盘输入代码

关键实现要点:

  1. 使用keydown事件而非keypress,确保所有按键可捕获
  2. 通过event.key替代已废弃的keyCode属性
  3. 中文输入法需配合composition事件处理
  4. 推荐使用事件委托优化多元素监听

以下两个代码块是使用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}`);
});


举报

相关推荐

0 条评论