uni-app中使用多个input第一次点击时键盘消失

uni-app中使用多个input第一次点击时键盘消失

示例代码：

<form @submit="submitSuggestion">
<input name="name" class="input_item" placeholder="请输入名字">  
<input name="newName" class="input_item" placeholder="请输入名字"></form>

操作步骤：

点击输入框，在切换到另一个输入框，软键盘显示了快速消失，再次点击才会有效

预期结果：

点击输入框来回切换软键盘不会消失

实际结果：

点击输入框，在切换到另一个输入框，软键盘显示了快速消失，再次点击才会有效

bug描述：

使用多个input第一次点击时键盘消失，在次点击才会出现软键盘

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX
Android 11
小米
红米10x

更多关于uni-app中使用多个input第一次点击时键盘消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

配置 :auto-blur=“false” 试试

更多关于uni-app中使用多个input第一次点击时键盘消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试了，没有效果

回复 7***@qq.com: 此问题仅特定设备复现吗？

回复 DCloud_UNI_GSQ: viov iQOO也可以复现

回复 DCloud_UNI_GSQ: 第一次触发的时候没有进focus，但是键盘弹出又收起了

安卓手机基本华为小米魅族都有这个问题，目前是在小程序里，多个u-input,点第一个正常，直接点第二个时候键盘就消失了

具体什么小程序？

这是一个常见的 uni-app 在 Android 设备上的焦点处理问题，通常与系统键盘管理机制有关。

主要原因：

  1. Android 系统焦点竞争：多个 input 元素切换时，系统可能错误处理了焦点丢失和重新获取的过程
  2. 表单容器影响：<form> 标签在某些 Android 版本上可能干扰焦点管理
  3. uni-app 的渲染时机：页面重绘可能导致输入框失去焦点

解决方案：

方案一：使用 @focus 和 @blur 手动控制（推荐）

<template>
  <view>
    <input 
      v-model="name" 
      @focus="handleFocus(1)"
      @blur="handleBlur"
      placeholder="请输入名字"
    />
    <input 
      v-model="newName"
      @focus="handleFocus(2)"
      @blur="handleBlur"
      placeholder="请输入名字"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      newName: '',
      currentFocus: null
    }
  },
  methods: {
    handleFocus(index) {
      this.currentFocus = index
      // 可以添加延迟确保键盘稳定
      setTimeout(() => {
        // 确保焦点保持
      }, 50)
    },
    handleBlur() {
      // 避免立即失去焦点
    }
  }
}
</script>

方案二：移除 form 标签（如果不需要表单提交）

<view>
  <input name="name" class="input_item" placeholder="请输入名字">  
  <input name="newName" class="input_item" placeholder="请输入名字">
</view>

方案三：使用 focus() 方法

// 在点击事件中手动触发焦点
handleInputClick(refName) {
  this.$nextTick(() => {
    this.$refs[refName].focus()
  })
}

方案四：调整页面样式 确保输入框不会被其他元素覆盖，检查是否有 z-index 或定位问题影响触摸事件。

方案五：升级 uni-app 版本 检查是否有相关修复的版本更新，这个问题在部分 uni-app 版本中已被优化。

临时规避方案： 在 pages.json 中配置页面样式：

{
  "style": {
    "softinputMode": "adjustResize"
  }
}
回到顶部