微信小程序form表单多input键盘弹框问题

问题描述：

form表单中有多个input时，输入完一个再去输入另一个时，会出现键盘弹框先闪退一下在调起的情况

解决方法：

用代码去控制键盘的关闭

实现步骤：

<view class="content">
    <view class="title">员工登录</view>
    <view class="inner inner1">
        <image class="icon" mode="scaleToFill" src="https://laikangland-dev.oss-cn-beijing.aliyuncs.com/20221020132747f5tq.png?Expires=2296963667&OSSAccessKeyId=LTAIykCrXSP1fmei&Signature=fAdmMqCCSm6nlDYOXEfL6xp%2BhEo%3D"></image>
        <input bindtap="inputTap" placeholder="账号" type="text" id="name" focus="{{focusId=='name'?true:false}}"  bindinput="account" placeholder-class="placeholder"/>
    </view>
    <view class="inner inner2">
        <image class="icon" mode="scaleToFill" src="https://laikangland-dev.oss-cn-beijing.aliyuncs.com/20221020132818e983.png?Expires=2296963699&OSSAccessKeyId=LTAIykCrXSP1fmei&Signature=nx8yr0MQGMEHVJF%2FgcAgxBfaG9o%3D"></image>
        <input bindtap="inputTap" placeholder="密码" id="password" focus="{{focusId=='password'?true:false}}" type='password'  bindinput="password" placeholder-class="placeholder"/>
    </view>
    <button class="mybtn" catchtap="login">登录</button>
</view>

 

data: {
    focusId: null
},
inputTap(e) {
   console.log("e",e)
   var that = this
   wx.hideKeyboard()
   setTimeout(function () {
      that.setData({
          focusId: e.currentTarget.id
      })
  }, 200)
},

试过vant的组件，里边的<van-field />也存在同样问题，可以试着改下组件里边的input，我感觉使用<van-field/>这个的优点就是表单校验展示页面更加方便友好。