input输入框聚焦键盘不显示
发布于 7 年前 作者 chao79 1540 次浏览 来自 官方Issues
<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

回到顶部