uni-app中input切换密码显示/隐藏必须动态绑定:type,通过修改响应式变量inputType实现;iOS需$nextTick后用uni.createSelectorQuery聚焦,或强制key更新重建节点。

uni-app里用input切换密码显示/隐藏,type值必须动态绑定
直接写死type="text"或type="password"没法切换,必须用v-model配合:type(即v-bind:type)动态控制。uni-app的input组件不支持运行时直接修改type属性而不触发重绘,所以绑定变量是唯一可靠方式。
常见错误是写成:——这是旧版WXML写法,在uni-app的Vue模板中无效,会报错或不响应。
- 必须用
:type="inputType",其中inputType是data里定义的响应式字符串变量 - 点击“眼睛图标”按钮时,只改
inputType值,不要动value或v-model绑定的字段 - iOS下若切换后光标消失,加
focus()手动聚焦(见下一条)
切换后光标丢失、无法继续输入?手动调用focus()补救
uni-app在Android和部分iOS版本中,input的type从password切到text时,原生控件可能失去焦点,导致键盘没反应。这不是bug,是原生渲染层重置行为。
解决方案是:在修改inputType后,用this.$nextTick()确保DOM更新完成,再调用focus()。
togglePassword() {
this.inputType = this.inputType === 'password' ? 'text' : 'password';
this.$nextTick(() => {
const input = uni.createSelectorQuery().in(this).select('#pwdInput');
input.fields({ node: true, size: true }, res => {
if (res && res.node) {
res.node.focus();
}
}).exec();
});
}
- 别用
document.getElementById,uni-app跨端不支持原生DOM操作 - 必须用
uni.createSelectorQuery查节点,且需fields({ node: true })才能拿到可调用focus()的node对象 - H5平台可简化为
this.$refs.pwdInput.focus(),但App和小程序必须走query路径
“眼睛图标”状态同步容易错:图标和type必须严格反向对应
图标显示“闭眼”却能看见明文,或显示“睁眼”却还是星号,通常是因为图标状态变量和inputType不同步,或者用了冗余判断逻辑。
最简方案是:图标状态完全由inputType推导,不另存一个布尔值。
<input :type="inputType" v-model="password" id="pwdInput"><view><image :src="inputType === 'password' ? '/icons/eye-off.png' : '/icons/eye-on.png'"></image></view>
- 避免定义
isShowPassword和inputType两个变量,它们本质是同一状态的两种表达 - 图标资源路径必须带
/开头(相对static目录),否则H5正常、小程序报404 - 如果用
uni-icons等图标库,注意其type属性和inputType不要命名冲突(比如都叫type)
App端软键盘兼容性问题:iOS输入法自动切换导致type失效
在iOS App中,若用户切换过输入法(比如从中英文间切换),再点眼睛图标,有时type切换会失效,仍显示星号。这是因为iOS原生UITextField在某些输入法状态下会忽略secureTextEntry的实时变更。
目前稳定解法是:强制销毁并重建input节点。
- 给
input加:key="inputKey",每次切换时更新inputKey(如this.inputKey++) - 配合
v-if做条件渲染(如v-if="showInput"),先设showInput = false,$nextTick后再设回true - 该方案会清空当前输入框内容,所以切换前需缓存
v-model值,并在重建后恢复
这属于iOS底层限制,没有更轻量的绕过方式。如果项目对iOS体验要求高,建议在登录页单独处理,其他页面优先用H5或小程序方案验证逻辑。











