uni-app 安卓微信小程序 input 组件失去焦点会触发@input事件（微信开发工具和IOS真机正常）

uni-app 安卓微信小程序 input 组件失去焦点会触发@input事件（微信开发工具和IOS真机正常）

开发环境 版本号 项目创建方式
Windows Windows 10 企业版 HBuilderX

产品分类：uniapp/小程序/微信

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.2

第三方开发者工具版本号：1.03

基础库版本号：2.14.4

项目创建方式：HBuilderX

示例代码：

// 子组件 searchInput.vue  
<template>  
 <input  
      class="search-input__input"  
      :value="value"  
      type="text"  
      :placeholder="placeholder"  
      placeholder-class="search-input__placeholder"  
      [@input](/user/input)="onInputEvent"  
      @confirm="onConfirm"  
      @focus="onFocus"  
      :disabled="disabled"  
      :maxlength="maxlength"  
      confirm-type="search"  
    />  
</template>  

<script>  
export default {  
 props: {  
    value: {  
      type: [String],  
      default: ''  
    },  
    disabled: {  
      type: [Boolean, String],  
      default: false  
    },  
    maxlength: {  
      type: [Number],  
      default: 140  
    },  
    placeholder: {  
      type: [String],  
      default: '请输入'  
    }  
  },  
 methods: {  
    onClick() {  
      this.$emit('onClick');  
    },  
    // 获取焦点  
    onFocus() {  
      this.$emit('onFocus');  
    },  
    // 输入赋值  
    onInputEvent(e) {  
      this.$emit('update:value', e.detail.value);  
    },  
    // 清空输入框  
    onClear() {  
      this.$emit('onClear');  
    },  
    // 点击确认  
    onConfirm(e) {  
      this.$emit('onConfirm', e.detail.value);  
    }  
  }  
}  
</script> 

// 页面引入子组件  
<template>  
   <search-input  
        :placeholder="placeholder"  
        :value.sync="inputVal"  
        @onConfirm="startSearch"  
        @onClear="onClear"  
      />  
</template>  

<script>  
import SearchInput from '@/wxcomponents/searchInput';  
export default {  
  components: {  
    SearchInput  
  },  
  methods:{  
    onInputEvent(val) {  
      console.log(val, 'onInput');  
      this.inputVal = val;  
    },  
  }  
}  
</script>
`

更多关于uni-app 安卓微信小程序 input 组件失去焦点会触发@input事件（微信开发工具和IOS真机正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

直接使用微信小程序（不使用 uni-app ）测试，问题是否存在，如果仍然存在反馈给微信小程序社区

更多关于uni-app 安卓微信小程序 input 组件失去焦点会触发@input事件（微信开发工具和IOS真机正常）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


使用原生不存在这个问题的

https://ask.dcloud.net.cn/question/71442 类似这种情况，估计是同一个原因

回复 a***@sina.cn: 应该不是同一个

回复 DCloud_UNI_GSQ: 你确认不使用 uni-app 就正常吗？

参考：https://developers.weixin.qq.com/community/develop/doc/0004e289064c18f3553b3dad15b000

这是一个在uni-app开发中遇到的安卓微信小程序input组件行为差异问题。根据描述，在安卓真机上input失去焦点时会额外触发@input事件，而微信开发工具和iOS真机表现正常。

问题分析：

  1. 这是微信小程序底层在安卓平台的特异行为
  2. 主要差异出现在焦点切换时的处理逻辑

解决方案建议：

  1. 使用防抖处理：
let timer = null
onInputEvent(e) {
  clearTimeout(timer)
  timer = setTimeout(() => {
    this.$emit('update:value', e.detail.value)
  }, 300)
}
  1. 或者增加焦点状态判断：
data() {
  return {
    isFocused: false
  }
},
methods: {
  onFocus() {
    this.isFocused = true
    this.$emit('onFocus')
  },
  onBlur() {
    this.isFocused = false
  },
  onInputEvent(e) {
    if(this.isFocused) {
      this.$emit('update:value', e.detail.value)
    }
  }
}
回到顶部