uni-app 小米手机使用uc浏览器密码输入框点击马上取消聚焦

uni-app 小米手机使用uc浏览器密码输入框点击马上取消聚焦

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

  • 点击密码输入观察

预期结果：

  • 点击密码输入后能打开软键盘聚焦

实际结果：

  • 聚焦后马上取消聚焦，不会打开软键盘

bug描述：

开发h5页面，使用input输入框设置type=“password”,使用小米手机，用uc浏览器打开，点击密码输入框，聚焦后马上取消聚焦，导致不能输入密码


更多关于uni-app 小米手机使用uc浏览器密码输入框点击马上取消聚焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

我复现到了你的问题,其他的场景还出现这个问题么

更多关于uni-app 小米手机使用uc浏览器密码输入框点击马上取消聚焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没得，只有用小米手机开uc有这个问题

好的,等待官方修复中

同样出现了这个问题，有问题的浏览器还包括【火狐】，同【小米手机】，推测是跟【小米安全键盘】冲突。

这个问题是由于UC浏览器在小米手机上对密码输入框的兼容性处理导致的。UC浏览器在某些Android版本中会对密码输入框进行特殊的安全处理，可能会干扰正常的聚焦行为。

可以尝试以下解决方案：

  1. 使用@focus和@blur事件手动控制： 在input组件上添加事件监听，通过设置变量强制保持聚焦状态：

    <template>
  <input 
    type="password" 
    :focus="isFocused"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

<script>
export default {
  data() {
    return {
      isFocused: false
    }
  },
  methods: {
    handleFocus() {
      this.isFocused = true
      // 延迟确保聚焦状态
      setTimeout(() => {
        this.isFocused = true
      }, 100)
    },
    handleBlur() {
      // 阻止自动失焦
      if (this.isFocused) {
        this.$nextTick(() => {
          this.isFocused = true
        })
      }
    }
  }
}
</script>

  2. 使用uni-app的input组件替代原生input：

    <template>
  <uni-easyinput 
    type="password" 
    v-model="password"
    placeholder="请输入密码"
  />
</template>

  3. 添加readonly属性临时方案： 点击时移除readonly属性：

    <template>
  <input 
    type="password" 
    :readonly="isReadonly"
    @click="handleClick"
  />
</template>

<script>
export default {
  data() {
    return {
      isReadonly: true
    }
  },
  methods: {
    handleClick() {
      this.isReadonly = false
      this.$nextTick(() => {
        // 强制触发聚焦
        const input = this.$refs.passwordInput
        input && input.focus()
      })
    }
  }
}
</script>
回到顶部