微信小程序踩坑记录

切换密码类型的 input 组件时不弹出输入法

我自己的手机是安卓，测试会有这样的 BUG，但是听说在 IOS 上没有这个问题，各位可以自己测试一下。

提示

关于这个问题，小程序官方社区在 2021 年就有人提出来了，2 年过去了，官方并没有修复....

解决办法： 在 input 组件上加上focus属性和bindtap事件，然后在bindtap事件中延迟调用this.setData更新focus的值，让他弹出输入法，具体如下：

html

<view class="input-example">
  <view class="demo-title">Input 输入框</view>
  <view class="demo-desc">用于单行文本信息输入。</view>
  <input type="text" placeholder="这是文本输入框" focus="{{textFocus}}" bindtap="textTap" />
  <input password placeholder="这是密码输入框" focus="{{pwdFocus}}" bindtap="pwdTap" />
</view>

js

Page({
  data: {
    textFocus: false,
    pwdFocus: false,
  },
  pwdTap() {
    //   在点击密码输入框的时候，延迟300ms去改变pwdFocus的值
    setTimeout(() => {
      this.setData({
        textFocus: false,
        pwdFocus: true,
      })
    }, 300)
  },
  textTap() {
    //  同理
    setTimeout(() => {
      this.setData({
        textFocus: true,
        pwdFocus: false,
      })
    }, 300)
  },
})

这样就可以触发输入法，让他弹出来了。

结语

如果你有更好的解决办法，欢迎在 github 给我留言。