uniapp 如何获取键盘keycode

在uniapp开发中，如何获取键盘按键的keycode？尝试了@keyup和@keydown事件，但获取到的值总是0或者undefined。有没有正确的方法来监听键盘事件并获取按键的keycode值？需要兼容H5和APP端。

2 回复

在uniapp中，可通过 @keydown 事件获取键盘事件对象，使用 e.keyCode 获取键码。示例：

<input @keydown="onKeyDown" />

<script>
export default {
  methods: {
    onKeyDown(e) {
      console.log(e.keyCode) // 输出键盘键码
    }
  }
}
</script>

注意：部分平台可能兼容性不同，建议测试目标平台。


在 UniApp 中，可以通过监听键盘事件获取按键的 keyCode。由于 UniApp 基于 Vue.js 并跨平台运行，具体实现取决于目标平台（如 H5、小程序、App）。以下是常见平台的实现方法：

1. H5 平台

在 H5 中，直接使用原生键盘事件（如 keydown 或 keyup）：

<template>
  <input @keydown="onKeyDown" placeholder="输入内容测试 keyCode" />
</template>

<script>
export default {
  methods: {
    onKeyDown(event) {
      const keyCode = event.keyCode; // 获取按键 keyCode
      console.log("按键 keyCode:", keyCode);
      // 示例：回车键 keyCode 为 13
    }
  }
}
</script>

2. 小程序平台

小程序（如微信小程序）需使用 bindkeyboardheightchange 或输入框事件，但 不直接支持 keyCode。可通过 input 事件结合其他属性间接处理：

<template>
  <input 
    @input="onInput" 
    @confirm="onConfirm" 
    placeholder="输入内容（确认键可获取 keyCode）"
  />
</template>

<script>
export default {
  methods: {
    onConfirm() {
      console.log("确认键被点击，keyCode 为 13"); // 模拟回车键
    },
    onInput(event) {
      // 处理输入内容，但无法直接获取 keyCode
    }
  }
}
</script>

3. App 平台（Android/iOS）

在 App 端，可通过 uni.onKeyDown 监听全局按键事件（仅部分按键支持）：

export default {
  mounted() {
    // 监听按键事件（部分物理按键如返回键、菜单键）
    uni.onKeyDown((event) => {
      console.log("按键 keyCode:", event.keyCode);
      // 示例：返回键 keyCode 为 4（Android）
    });
  }
}

注意事项：

  • 平台差异：H5 支持完整 keyCode，小程序限制较多，App 仅支持物理按键。
  • 推荐方案：若需兼容多平台，建议通过 input 事件或自定义逻辑处理特定按键（如回车键）。
  • keyCode 已废弃：现代前端开发中，keyCode 逐渐被 key 属性替代（如 event.key === 'Enter'），但 UniApp 中需根据平台适配。

根据需求选择合适方案，优先测试目标平台兼容性。

回到顶部