视图:
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;
}