uni-app input组件 @input 事件中文输入触发2次 英文触发一次

uni-app input组件 @input 事件中文输入触发2次 英文触发一次

开发环境 版本号 项目创建方式
Windows HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：windows10

HBuilderX类型：正式

HBuilderX版本号：3.2.3

手机系统：iOS

手机系统版本号：iOS 12.4

手机厂商：苹果

手机机型：ios

页面类型：nvue

打包方式：云端

操作步骤：

     <view class="uni-form-item uni-column">  
                <view class="title"><text class="uni-form-item__title">实时获取输入值：{{inputValue}}</text></view>  
                <view class="uni-input-wrapper">  
                    <input class="uni-input" [@input](/user/input)="onKeyInput" placeholder="输入同步到view中" />  
                </view>  
    </view>

     onKeyInput: function(event) { console.log('123')  
                this.inputValue = event.detail.value  
            }

预期结果：

18:09:22.319 123 at pages/component/input/input.nvue:125


实际结果：

18:09:22.319  123 at pages/component/input/input.nvue:125   
18:09:22.350  123 at pages/component/input/input.nvue:125

bug描述：


更多关于uni-app input组件 @input 事件中文输入触发2次 英文触发一次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

你好中文输入的时候会触发两次为iOS系统事件，就是这样，如果需要根据文本触发事件需要自己添加 防抖节流 的逻辑哦

更多关于uni-app input组件 @input 事件中文输入触发2次 英文触发一次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是 nvue 页面中 input 组件的正常行为，与中文输入法特性有关。

原因分析： 在 nvue 中，当使用中文输入法时：

  1. 第一次触发：输入拼音时触发（compositionstart）
  2. 第二次触发：选择汉字完成输入时触发（compositionend）

英文输入因为没有中间状态，所以只触发一次。

解决方案：

  1. 使用 composition 事件处理（推荐）
data() {
    return {
        isComposing: false
    }
},
methods: {
    onKeyInput(event) {
        if (!this.isComposing) {
            console.log('实际输入值:', event.detail.value)
            this.inputValue = event.detail.value
        }
    },
    onCompositionStart() {
        this.isComposing = true
    },
    onCompositionEnd(event) {
        this.isComposing = false
        console.log('最终输入值:', event.detail.value)
        this.inputValue = event.detail.value
    }
}

模板中添加：

<input 
    class="uni-input" 
    @input="onKeyInput"
    @compositionstart="onCompositionStart"
    @compositionend="onCompositionEnd"
    placeholder="输入同步到view中" 
/>
  1. 使用防抖处理
import { debounce } from 'lodash'

methods: {
    onKeyInput: debounce(function(event) {
        console.log('输入值:', event.detail.value)
        this.inputValue = event.detail.value
    }, 100)
}
  1. 如果是 vue 页面，可以使用 v-model 替代
<input v-model="inputValue" />
回到顶部