收藏
回答

input输入框聚焦键盘不显示

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug input 微信iOS客户端 7.0.12 华为,iphonex
<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 focus {
  from {
    opacity: 1;
  }


  to {
    opacity: 0;
  }
}


we .number-box:nth-child(1) {
  margin-left: 0rpx;
}
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签