input输入框聚焦键盘不显示
<view class='input-box'>
<view class='number-box'>
<block wx:for="{{verityLength}}" wx:key="item">
<view class="input-list">
<view wx:if="{{codeNumber.length === index && focus}}" class="cursor"></view>
<input class="box-input" value="{{codeNumber.length>=index+1?codeNumber[index]:''}}" disabled catchtap='onfocus'></input>
</view>
</block>
</view>
<input class='input-number' value="{{codeNumber}}" maxlength="{{verityLength}}" focus="{{focus}}" bindinput="handleSetCode" bindfocus='onfocus' bindblur='onblur'></input>
{{focus}}
</view>
.input-box {
/* padding-left: 36rpx; */
box-sizing: border-box;
margin-top: 40rpx;
position: relative;
}
.input-number {
width: 0;
height: 0;
min-height: 0;
/* width: 670rpx;
height: 124rpx;
min-height: 0;
margin:0 auto;
position: absolute;
top:0;
left: 40rpx;
opacity: 0;
color: transparent; */
}
.number-box {
width: 670rpx;
margin:0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.input-list{
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
width:100%;
height: 124rpx;
}
.box-input{
text-align: center;
width: 92rpx;
height: 116rpx;
border-radius: 20rpx;
border: 2rpx solid #E6E6E6;
margin-left: 16.5rpx;
font-size: 84rpx;
line-height: 115rpx;
text-align: center;
position: absolute;
left: 0;
bottom: 0rpx;
box-sizing: border-box;
}
.input-list:first-child .box-input{
margin-left: 0;
}
.cursor {
width: 1px;
height: 80rpx;
background-color: #000;
animation: focus 1s infinite;
margin-left: -30rpx;
margin-top: 5rpx;
/* position: absolute;
left: 83.5rpx; */
}
.input-list:first-child .cursor{
margin-left: -60rpx;
}
[@keyframes](/user/keyframes) focus {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
we .number-box:nth-child(1) {
margin-left: 0rpx;
}
1 回复
你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)