uniapp 如何监听输入框回车事件

在uniapp开发中，如何监听输入框的回车事件？我尝试在input组件上使用@confirm事件，但有时无法触发。请问正确的实现方式是什么？是否需要使用@keyup.enter或其他方法？希望能提供一个完整的示例代码。

2 回复

在 input 或 textarea 标签上绑定 @confirm 事件即可监听回车键。

示例：

<input @confirm="handleConfirm" />

在 methods 中定义处理函数：

methods: {
  handleConfirm(e) {
    console.log('回车触发', e.detail.value)
  }
}

在 UniApp 中，监听输入框的回车事件可以通过 @confirm 事件实现。以下是具体方法：

方法说明

  • 使用 input 或 textarea 组件时，绑定 @confirm 事件。
  • 当用户点击键盘的“完成”或“回车”按钮时触发该事件。

代码示例

<template>
  <view>
    <!-- 监听 input 组件的回车事件 -->
    <input 
      type="text" 
      placeholder="请输入内容" 
      @confirm="handleConfirm" 
    />
    
    <!-- 监听 textarea 组件的回车事件 -->
    <textarea 
      placeholder="请输入多行内容" 
      @confirm="handleConfirm" 
    />
  </view>
</template>

<script>
export default {
  methods: {
    handleConfirm(event) {
      // 获取输入框的值
      const value = event.detail.value;
      console.log("回车确认，输入内容：", value);
      // 可以在这里执行提交、搜索等逻辑
    }
  }
}
</script>

注意事项

  1. 键盘类型：确保键盘显示“完成”或“回车”按钮（例如 confirm-type 属性设置为 done 或 send）。
  2. 兼容性：在 iOS 和 Android 上行为一致，但不同键盘样式可能略有差异。
  3. 如果需要阻止默认行为（如页面滚动），可在事件中调用 event.preventDefault()。

通过以上方式即可轻松监听输入框的回车确认事件。

回到顶部