视图：
wxml：
<view class="container">
<button catchtap="getCode">获取验证码</button>
<input id="phone_number" placeholder="输入您的手机号码" bindinput="inputPhoneNumber" auto-focus/>
</view>
问题：点击获取验证码按钮时，输入焦点一直在input里面，导致 button 的catchtap事件不能触发。求各位大神帮忙解答~~~
| 框架类型 | 问题类型 | 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事件不能触发。求各位大神帮忙解答~~~
1 个回答
去掉auto-focus
试了不行，问题同样存在。
是不是css问题啊，input太长了？
.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;
}
你这个css不太合理，给input价格padding-right试试，不短于button的长度
改了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;
}