uni-app input组件type为password时,在小米手机钉钉浏览器无法弹出软件盘
uni-app input组件type为password时,在小米手机钉钉浏览器无法弹出软件盘
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | HBuilderX | |
3.3.13 |
操作步骤:
- 小米手机 钉钉内置浏览器就能复现
预期结果:
- 点击密码输入框弹出软键盘
实际结果:
- 点击没有任何反应 打印之后发现一直在触发blur事件
bug描述:
- input type为password时 弹不出安全键盘 测试发现一直在触发blur事件 用官方的demo也有该问题
3 回复
问题确认,已加分,后续修复。
HBuilderX alpha 3.4.6 已修复
在 uni-app
中使用 input
组件时,如果 type
设置为 password
,在某些特定的浏览器(如小米手机上的钉钉浏览器)可能无法正常弹出软键盘。这通常是由于浏览器对 input
类型的兼容性问题导致的。
以下是一些可能的解决方案:
1. 使用 text
类型并手动处理密码输入
你可以将 input
的 type
设置为 text
,然后通过 JavaScript 手动处理密码输入的逻辑。例如,你可以使用 input
事件来监听用户输入,并将输入内容替换为 *
或其他字符。
<template>
<view>
<input type="text" :value="password" @input="handleInput" />
</view>
</template>
<script>
export default {
data() {
return {
password: ''
};
},
methods: {
handleInput(event) {
this.password = event.detail.value;
// 你可以在这里处理密码输入的逻辑
}
}
};
</script>
2. 使用 password
类型并尝试其他浏览器
如果可能,建议用户使用其他浏览器(如 Chrome、Safari 等)来访问你的应用,以确保 input
组件的 password
类型能够正常工作。
3. 使用 uni-app
提供的原生插件
如果上述方法无法解决问题,你可以考虑使用 uni-app
提供的原生插件来处理密码输入。例如,你可以使用 uni-popup
插件来创建一个自定义的密码输入框。
4. 检查浏览器兼容性
确保你使用的 uni-app
版本和浏览器版本是最新的,因为新版本通常会修复一些兼容性问题。
5. 使用 input
的 password
属性
在某些情况下,input
组件的 password
属性可能比 type="password"
更兼容。你可以尝试使用 password
属性来替代 type
。
<template>
<view>
<input password :value="password" @input="handleInput" />
</view>
</template>
<script>
export default {
data() {
return {
password: ''
};
},
methods: {
handleInput(event) {
this.password = event.detail.value;
}
}
};
</script>
6. 使用 textarea
组件
如果 input
组件无法正常工作,你可以尝试使用 textarea
组件,并通过 CSS 样式将其调整为单行输入框。
<template>
<view>
<textarea :value="password" @input="handleInput" style="height: 40px; line-height: 40px;" />
</view>
</template>
<script>
export default {
data() {
return {
password: ''
};
},
methods: {
handleInput(event) {
this.password = event.detail.value;
}
}
};
</script>