uniapp中摁下enter键如何触发事件

在uniapp中，按下键盘的enter键时如何触发对应的事件？我尝试在input组件上绑定@keyup.enter事件，但发现没有效果。请问正确的实现方式是什么？是否需要额外的配置或者只能在特定环境中使用？

2 回复

在uniapp中，可以通过@confirm事件或@keyup.enter监听回车键。例如：

<input @confirm="handleEnter" />
<!-- 或 -->
<input @keyup.enter="handleEnter" />

在methods中定义处理函数即可。


在 UniApp 中，按下 Enter 键触发事件可以通过监听键盘事件实现。以下是具体方法：

  1. 使用 @confirm 事件（推荐）
    适用于 <input> 或 <textarea> 组件，当用户按下回车键时自动触发。

    <template>
  <input type="text" @confirm="handleConfirm" placeholder="输入后按回车" />
</template>
<script>
export default {
  methods: {
    handleConfirm(e) {
      console.log('回车键被按下', e.detail.value);
      // 在这里添加处理逻辑
    }
  }
}
</script>

  2. 使用 @keypress 或 @keyup 事件
    通过检查按键的 keyCode（13 代表 Enter 键）来触发：

    <template>
  <input type="text" @keyup="handleKeyUp" placeholder="监听按键事件" />
</template>
<script>
export default {
  methods: {
    handleKeyUp(e) {
      if (e.keyCode === 13) {
        console.log('回车键被按下', e.target.value);
        // 在这里添加处理逻辑
      }
    }
  }
}
</script>

注意事项：

  • 在部分平台（如小程序）中，@keypress 可能不支持，建议使用 @confirm 或 @keyup。
  • 若需要全局监听键盘事件，可通过页面的 onLoad 和 onUnload 结合 uni.onKeyDown 实现（注意平台兼容性）。

以上方法简单高效，适用于大部分 UniApp 开发场景。

回到顶部