uni-app Nvue input password属性切换其他属性需多次点击才能弹出键盘

uni-app Nvue input password属性切换其他属性需多次点击才能弹出键盘

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

PC开发环境操作系统：Windows

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

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：Redmi k30s 至尊纪念版

页面类型：nvue

打包方式：离线

操作步骤：

<input  type="text" v-model="username"  value=""   placeholder="输入用户名" />  
<input   type="password" v-model="password"  value=""  placeholder="输入密码" />  

预期结果：

不行

实际结果：

还是不行

bug描述：

input password 密码框 与其他input框冲突   其他input可以流畅切换 但是切换成password框之后在切换别的input框就需要重复点击才能弹起  把手机自带安全键盘关闭之后就没事了 很影响体验感 不能每次都关闭安全键盘把

更多关于uni-app Nvue input password属性切换其他属性需多次点击才能弹出键盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app Nvue input password属性切换其他属性需多次点击才能弹出键盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于Android系统安全键盘（Secure Input）与uni-app nvue页面中input类型切换时的兼容性问题导致的。当input类型从普通文本切换为password时，系统会启用安全键盘，而再次切换回普通输入框时，键盘状态未能及时更新，导致需要多次点击才能弹出。

解决方案：

  1. 强制重新聚焦：在切换input时，手动触发blur和focus事件，强制刷新键盘状态。

    // 在切换输入框时调用
handleInputSwitch() {
  this.$refs.passwordInput.blur()
  setTimeout(() => {
    this.$refs.otherInput.focus()
  }, 50)
}

  2. 使用不同的输入框：避免在同一个input上动态切换type属性，可以分别使用两个独立的input元素，通过v-if控制显示。

    <input v-if="!showPassword" type="text" [@focus](/user/focus)="switchToPassword" />
<input v-else type="password" [@blur](/user/blur)="switchToText" />

  3. 调整键盘类型：尝试设置不同的键盘类型，可能减少冲突。

    <input type="password" :keyboard-type="keyboardType" />
回到顶部