uniapp input 回车事件如何实现

在uniapp开发中，如何为input组件实现回车事件？我尝试了@confirm和@keyup.enter都没生效，请问正确的绑定方式是什么？需要监听键盘回车键提交表单数据。

2 回复

在uniapp中，可以通过@confirm事件监听input回车。例如：<input @confirm="handleConfirm" />，然后在methods中定义handleConfirm方法即可。


在 UniApp 中，可以通过 @confirm 事件监听 Input 组件的回车键（或键盘的“完成”按钮）触发。以下是实现方法：

1. 基本实现

在 input 组件上绑定 @confirm 事件，并在方法中处理逻辑：

<template>
  <view>
    <input 
      placeholder="输入内容后按回车" 
      @confirm="handleConfirm" 
    />
  </view>
</template>

<script>
export default {
  methods: {
    handleConfirm(e) {
      console.log('回车触发，输入值:', e.detail.value)
      // 在这里执行提交、搜索等操作
    }
  }
}
</script>

2. 搭配 v-model 使用（推荐）

结合 v-model 获取输入值：

<template>
  <view>
    <input 
      v-model="inputValue"
      placeholder="输入内容" 
      @confirm="handleConfirm"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleConfirm() {
      console.log('当前输入值:', this.inputValue)
      // 执行业务逻辑
      this.inputValue = '' // 可选：清空输入框
    }
  }
}
</script>

3. 注意事项

  • 平台差异：在安卓设备上，键盘可能显示“回车”；在 iOS 上可能显示“完成”。
  • 表单场景：可将 input 放在 form 组件内，结合 @submit 统一处理。
  • 隐藏键盘：触发 @confirm 后会自动收起键盘，无需额外代码。

以上方法适用于文本输入场景，如搜索框、聊天输入等。

回到顶部