uni-app 两个type同为text的input焦点切换时键盘会拉起后消失

uni-app 两个type同为text的input焦点切换时键盘会拉起后消失

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Windows

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

win10

HBuilderX类型：

正式

HBuilderX版本号：

3.2.16

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

1.05.2110290

基础库版本号：

2.21.1

项目创建方式：

HBuilderX

示例代码：

<template>  
    <view>  
        <view style="display: inline-block;" >  
          valA<input v-model="valA" type="text" placeholder="请输入" />  
        </view>  
        <view style="display: inline-block;" >  
          valB<input v-model="valA" type="text" placeholder="请输入" />  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                valA: '',  
                valB: ''  
            }  
        },  
    }  
</script>

另附上改造成微信小程序原生语法的样子

<view class="container">  
  <view style="display: inline-block;" >  
    valA<input model:value="{{valA}}" type="text" />  
  </view>  
  <view style="display: inline-block;" >  
    valB<input model:value="{{valB}}" type="text" />  
  </view>  
</view>

操作步骤：

1.点击第一个输入框 2.点击第二个输入框

预期结果：

软键盘拉起，并且焦点在第二个输入框上

实际结果：

软键盘消失，并且焦点不在第二个输入框上

bug描述：

机型：一加8pro 两个text输入框之间焦点切换，手机软键盘会拉起然后消失 另外，同样的代码改造一下符合微信小程序原生语法去直接跑，并不会出现该问题


更多关于uni-app 两个type同为text的input焦点切换时键盘会拉起后消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 两个type同为text的input焦点切换时键盘会拉起后消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app在部分安卓机型上的兼容性问题，主要出现在微信小程序平台。

问题原因： 当两个type="text"的input组件快速切换焦点时，某些安卓机型（如一加、小米等）的微信小程序基础库会触发键盘的异常收起。这是由于微信小程序底层对input组件焦点管理的机制与uni-app的编译渲染存在时序差异导致的。

临时解决方案：

  1. 使用@focus和@blur手动控制： 通过延迟设置焦点来避免快速切换。
    <input 
  v-model="valA" 
  type="text" 
  :focus="focusA"
  @focus="handleFocus('A')"
  @blur="handleBlur('A')"
/>

    handleFocus(type) {
  this[`focus${type}`] = true
  // 短暂延迟确保键盘稳定
  setTimeout(() => {
    this[`focus${type}`] = true
  }, 50)
}
回到顶部