微信小程序6位验证码输入框、隐藏光标、letter-spacing失效

有需求要做6位验证码框如下图：

开始分别用6个输入框做这个6个数字，发现在手机上有延时不快速，而且删除部分数字会出问题。

之后想到一个办法：

用一个透明input和假的6个框叠起来。

1.透明input用于用户输入数字

2.6个假的框用于展示数字。

这其中遇到一个棘手的问题，iPhoto手机上如图：

输入的字是隐藏了，光标没法隐藏。为了解决此问题想了以下办法：

1.更改光标颜色，设置透明（没用）

input{
  color: transparent;
 caret-color: transparent!important;
}
 input:first-line {
  color: transparent;
} 

2.增加letter-spacing样式，增加input文字间隔（没用）

input{
  letter-spacing: 50.4rpx!important;
}

3.隐藏光标，找了各种配置input没有确切的隐藏光标方法。但是找到了一种伪隐藏的方法：

就是这个排版用到绝对定位，让input宽度增大，左边超出一大截，超出隐藏，将用户输入的文字长度放超出的部分，即看不到了。

上代码：

wxml：

 <view class="register_photocode">
                    <input type="number" class="register_photocode_input"  maxlength="6" bindinput="bindPhotoCode" focus="{{isphotocode}}" ></input>
                     <view class="register_photocode_ul">
                        <view class="register_photocode_li" wx:for="{{6}}">
                            <view wx:if="{{smsnumber_arr.length===index}}" class="register_photocode_cursor"></view>
                            <text>{{smsnumber_arr[index]}}</text>
                        </view>
                     </view>                     
                </view>

js:

  data: {
    smsnumber: "",
    isphotocode: 0
  },
  bindPhotoCode:function(e){
    let value=e.detail.value
    let smsnumber=this.data.smsnumber
     this.setData({
      smsnumber: e.detail.value,
      smsnumber_arr:[...value]
     })
  },

wxss:

.register_photocode{
  position: relative;//最外层相对定位
}

.register_photocode_ul{
  display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 18rpx;
}
.register_photocode_li{
  width: 64.8rpx;
    height: 64.8rpx;
    line-height: 64.8rpx;
    border-radius: 27rpx;
    border: 1px solid #bbb;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 21.6rpx;
    margin-right: 18rpx;
    text-align: center;
}
.register_photocode input{
  position: absolute;
  left: -100%;//左边超出
  top: 0;
  width: 200%;//宽度加大
  height: 64.8rpx;
  line-height: 64.8rpx;
  opacity: 0;//透明input
  color: transparent;//输入文字颜色透明
  letter-spacing: 50.4rpx!important;
  background: none;
  padding-left: 30.6rpx;
  caret-color: transparent!important;
}
/* .register_photocode input:first-line {
  color: transparent;
} */

//光标隐藏了，模拟一个假的光标
.register_photocode_cursor {
  width: 1px;
  height: 40rpx;
  background-color: #000;
  animation: focus 0.7s infinite;
}
/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

微信小程序6位验证码输入框、隐藏光标、letter-spacing失效：https://download.csdn.net/download/qq_41211900/16272218

标签：smsnumber,color,微信,spacing,输入框,photocode,rpx,input,光标
来源： https://blog.csdn.net/qq_41211900/article/details/115354961