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

这篇具有很好参考价值的文章主要介绍了微信小程序当在一个页面有多个input输入框,自动弹键盘,需要点击input框2次才能聚焦的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序当在一个页面有多个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)
  }

方法仅供参考!文章来源地址https://www.toymoban.com/news/detail-511087.html

到了这里,关于微信小程序当在一个页面有多个input输入框,自动弹键盘,需要点击input框2次才能聚焦的问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序——输入框input

    bindevent.wxss中代码: bindevent.wxml中代码: class=\\\"myinput\\\": 通过 class 属性设置该输入框的样式类,可以在 WXSS 中通过样式类来定义该输入框的样式。 bindinput=\\\"changeContent\\\": 通过 bindinput 属性将输入框的输入事件绑定到名为 changeContent 的事件处理函数上。当用户在输入框中输入内容时

    2024年02月07日
    浏览(46)
  • 微信小程序input输入框校验手机号输入错误

    inputtaskphone(e) { if(e.detail.value!=“”){ if (!(/^1[3456789]d{9}$/.test(e.detail.value))) { this.setData({ phonedisplay: true, placeholder: “”, “task.phone”:“” }) } } }, focus() { this.setData({ phonedisplay: false, placeholder: “请输入联系方式”, “task.phone”:“” }) }, data: { task: { phone: “” }, phonedisplay: false,

    2024年02月09日
    浏览(50)
  • 华为手机 微信小程序 input输入框上移

    不知道大家有木有遇到过 微信小程序的input 调起输入法的时候 会被挤上去 输入框跑到上面去了 无论css怎么写怎么布局 还是会跑上移 尤其是测试mm的华为手机 别的手机都OK的 解决的方法是 给input加个 adjust-position=\\\"{{ false }}\\\" 比方说我这里要获取用户昵称 就可以这样 但是只写

    2024年02月16日
    浏览(47)
  • uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input

    官网文档地址 1、template 2、script 3、温馨提示 当比较输入框内的数值大小时,由于输入的类型为string,所以比较的时候需要转换为数值类型 Number() if(Number(this.num1) Number(this.num2)){ … }

    2024年02月16日
    浏览(41)
  • 微信小程序安卓系统下Input输入内容上移错位问题的解决办法

    需要设置一个状态控制scroll-view是否允许滑动,当Input获取焦点是,将滑动禁止,当Input失去焦点时,允许滑动

    2024年01月20日
    浏览(76)
  • Vue实现多个input输入,光标自动聚焦到下一个input

    遇到一个需求,需要实现和移动端短信输入一样,输入内容后,光标会进入下一个输入框 需要用到2个事件  keydown事件发生在键盘的键被按下的时候 keyup  事件在按键被释放的时候触发

    2024年02月20日
    浏览(40)
  • 微信小程序如何实现页面传参和页面传递多个参数

    只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。 下面时多个参数页面传参的方式   通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 分隔;如 ‘path?key=valuekey2=value2’。 案例:

    2024年02月11日
    浏览(80)
  • 【微信小程序】使用页面跳转并携带多个特定参数

    在我们项目的搭建时常常会用到页面跳转,在微信小程序中也支持多个跳转类型。如( wx.switchTabwx.reLauchwx.redirectTowx.navigateTowx.navigateBack )等等, 每一个路由API都是有相对应的特定跳转功能 ,在这里我就不赘述了。 微信开发者文档关于路由的知识点 这里我们 项目的需求 是

    2023年04月18日
    浏览(61)
  • 微信小程序wx.navigateTo传给子页面参数(单个参数、多个参数)

    子页面接收 传多个参数 子页面接受 假设值是后端传过来的动态的值

    2024年02月07日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包