收藏
回答

按钮点击事件不能触发

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug Button 客户端 6.7.2 2.0.0

视图:



wxml:

<view class="container">

<button catchtap="getCode">获取验证码</button>

<input id="phone_number" placeholder="输入您的手机号码" bindinput="inputPhoneNumber" auto-focus/>

</view>


问题:点击获取验证码按钮时,输入焦点一直在input里面,导致 button 的catchtap事件不能触发。求各位大神帮忙解答~~~


最后一次编辑于  2018-09-14
回答关注问题邀请回答
收藏

1 个回答

  • 🚗🚕🚙🚌🚎🚒🚐🚚
    🚗🚕🚙🚌🚎🚒🚐🚚
    2018-09-14

    去掉auto-focus

    2018-09-14
    赞同
    回复 5
    • 桑丘
      桑丘
      2018-09-14

      试了不行,问题同样存在。

      2018-09-14
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-09-14回复桑丘

      是不是css问题啊,input太长了?

      2018-09-14
      1
      回复
    • 桑丘
      桑丘
      2018-09-14回复🚗🚕🚙🚌🚎🚒🚐🚚

      .container input {

      position: absolute;

      left: 0rpx;

      top: 0rpx;

      width: 100%;

      height: 100rpx;

      background: #fff;

      padding-left: 5rpx;

      border: 1px solid #999999;

      }


      .container button {

      position: absolute;

      right: 10rpx;

      top: 14rpx;

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      background: #4285f4;

      color: white;

      height: 80rpx;

      line-height: 60rpx;

      border-radius: 4rpx;

      font-size: 30rpx;

      z-index: 100;

      }


      2018-09-14
      回复
    • 🚗🚕🚙🚌🚎🚒🚐🚚
      🚗🚕🚙🚌🚎🚒🚐🚚
      2018-09-14回复桑丘

      你这个css不太合理,给input价格padding-right试试,不短于button的长度

      2018-09-14
      回复
    • 桑丘
      桑丘
      2018-09-14回复🚗🚕🚙🚌🚎🚒🚐🚚

      改了CSS,现在可以了:

      .container {

      display: flex;

      flex-direction: row;

      align-items: center;

      width: 90%;

      height: 100rpx;

      padding: 0rpx 6rpx;

      margin-bottom: 18rpx;

      background: #fff;

      border: 1px solid #999999;

      }


      .container input {

      flex-grow: 2;

      height: 90;

      background: #fff;

      padding-left: 5rpx;

      }


      .container button {

      display: flex;

      flex-direction: column;

      justify-content: center;

      align-items: center;

      background: #4285f4;

      color: white;

      height: 80rpx;

      line-height: 60rpx;

      border-radius: 4rpx;

      font-size: 30rpx;

      z-index: 100;

      }


      2018-09-14
      回复