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 类型并手动处理密码输入

你可以将 inputtype 设置为 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. 使用 inputpassword 属性

在某些情况下,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>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!