微信小程序当在一个页面有多个input输入框，自动弹键盘，需要点击input框2次才能聚焦的问题

最新推荐文章于 2024-05-17 08:31:50 发布

稚于最初chu

最新推荐文章于 2024-05-17 08:31:50 发布

阅读量5.1k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序前端

本文链接：https://blog.csdn.net/weima9977/article/details/127445020

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信小程序当在一个页面有多个input输入框，自动弹键盘，需要点击input框2次才能聚焦。
解决办法，在点击input框时，调用bindtap事件，关闭键盘、设置焦点。代码示例如下：

<view class="tr">
        <view class="th1">
          <text class='title text-bold'>账号:</text>
          <input class='radius zc-input text-lg margin-left' bindtap="inputTap" bindinput="bindInputs" id="name" value="{{name}}" placeholder="请输入账号" focus="{{focusId=='name'?true:false}}"></input>
        </view>
      </view>
      <view class="tr">
        <view class="th1">
          <text class='title text-bold'>密码:</text>
          <input class=' radius zc-input1 text-lg margin-left' type="password" bindtap="inputTap" bindinput="bindInputs" id="password" value="{{password}}" placeholder="请输入账号面膜" focus="{{focusId=='password'?true:false}}"></input>
        </view>
      </view>

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

方法仅供参考！