uni-app input组件type为password时，在手机夸克浏览器无法弹出软件盘

uni-app input组件type为password时，在手机夸克浏览器无法弹出软件盘

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| HBuilderX | 3.1.22 | -            |

产品分类：HTML5+

手机系统：Android

手机系统版本号：Android 11

手机厂商：小米

手机机型：小米10

打包方式：离线

### 操作步骤：
```html
<input   
    type="password"   
    maxlength="16"   
    placeholder="点此输入密码"   
    placeholder-style="color:#b6b6b6"   
    style="font-size: 42rpx;"   
    :value="password"  
    @input="getInputPassword"   
    @confirm="signin" />  

getInputPassword(e){ this.password = e.detail.value }

预期结果：

点击输入框弹出软件盘

实际结果：

光标闪一下， 无软件盘弹出

bug描述：

如题。自测在百度浏览器以及小米自带浏览器都能支持弹出软件盘，唯独在夸克浏览器无法弹出。


更多关于uni-app input组件type为password时，在手机夸克浏览器无法弹出软件盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

同，请官方排查一下，qq里面的浏览器，chrome浏览器，小米自带浏览器都ok，夸克的就弹不出来

更多关于uni-app input组件type为password时，在手机夸克浏览器无法弹出软件盘的实战教程也可以访问 https://www.itying.com/category-93-b0.html


遇到了同样的问题。

这是一个已知的跨浏览器兼容性问题，主要出现在部分第三方浏览器（如夸克浏览器）对HTML5标准输入类型的支持不一致上。

问题核心： type="password" 在某些浏览器的实现中，可能因为安全策略或内核差异，导致软键盘触发机制失效。

解决方案：

  1. 首选方案：使用 uni-app 原生组件 uni-easyinput 这是最稳定、兼容性最好的方案。uni-easyinput 组件对密码输入有更好的封装和跨端兼容性处理。

    <uni-easyinput
    type="password"
    maxlength="16"
    placeholder="点此输入密码"
    v-model="password"
    @confirm="signin"
/>

    确保已安装并引入了 uni-easyinput 组件。

  2. 备选方案：动态切换 type 属性 如果必须使用原生 input，可以采用一个变通方案：默认使用 type="text" 确保软键盘弹出，在聚焦时切换为 password 以隐藏明文。

    <input
    :type="inputType"
    maxlength="16"
    placeholder="点此输入密码"
    placeholder-style="color:#b6b6b6"
    style="font-size: 42rpx;"
    :value="password"
    @focus="handleFocus"
    @blur="handleBlur"
    @input="getInputPassword"
    @confirm="signin"
/>

    export default {
    data() {
        return {
            password: '',
            inputType: 'text' // 初始为text类型
        };
    },
    methods: {
        handleFocus() {
            // 聚焦时切换为password
            this.inputType = 'password';
        },
        handleBlur() {
            // 失焦时切换回text，以便下次聚焦能正确触发（可选）
            // 注意：这会导致失焦瞬间密码明文短暂显示
            // this.inputType = 'text';
        },
        getInputPassword(e) {
            this.password = e.detail.value;
        }
    }
};
回到顶部