微信小程序实现自定义input输入框

1.实现效果

2.实现原理

1.微信小程序的input不支持letter-spacing的属性

2.将input的宽度设置成250%（注意，父元素需要设置overflow：hidden，否则在苹果手机上将出现滑动），并设置absolute定位将input输入框定位出当前页面。

3.将input输入的值用absolute定位到4个框框里面，设置letter-spacing将文字隔开。

3.实现代码

/* pages/subPack/customIpt/index.wxss */
.dialog_pop03 {
  overflow: hidden;
  width: 498rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1111;
  box-sizing: border-box;
  padding: 46rpx 0 39rpx;
  color: #999;
  font-size: 26rpx;
}

.pop03_title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.pop03_item:first-child {
  border-left: 1rpx solid #D9D9D9;
}

.pop03_item {
  width: 65rpx;
  height: 65rpx;
  border: 1rpx solid #D9D9D9;
  border-left: none;
}

.pop03_input {
  margin: 38rpx 0 59rpx;
  position: relative;
}

.pop03_btns view {
  width: 146rpx;
  height: 55rpx;
  border: 2rpx solid #e2c3c3;
  border-radius: 44rpx;
  margin-right: 60rpx;
  text-align: center;
  line-height: 55rpx;
  font-size: 28rpx;
  color: #e2c3c3;
}

.pop03_btns view:last-child {
  margin-right: 0;
  background:#e2c3c3;
  color: #fff;
}

.pop03_text {
  position: absolute;
  top: 0;
  height: 65rpx;
  width: 250%;
  left: -350rpx;
}

.pop3_code {
  font-size: 28rpx;
  color: #e2c3c3;
  position: absolute;
  left: 25rpx;
  letter-spacing: 51rpx;
}

.head_tip {
  font-size: 28rpx;
  color: #084099;
  position: absolute;
  right: 58rpx;
  top: 20rpx;
  z-index: 10;
}

.btn {
  width: 200rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  background: #e2c3c3;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin: 150rpx auto;
}

<!--pages/subPack/customIpt/index.wxml-->
<view class="btn" catchtap="showCode">弹出输入框</view>
<view class="mask" wx:if="{{show_input}}" catchtap="closeModal"></view>
<view class="dialog_pop03 flex-column" wx:if="{{show_input}}">
  <view class="pop03_title">请输入XXXXXXXX</view>
  <view class="popo03_tip">(这是一个提示)</view>
  <view class="flex-row pop03_input">
    <block wx:for="{{4}}" wx:key="index">
      <view class="pop03_item"></view>
    </block>
    <!-- 输入内容 -->
    <view class="pop3_code">{{code}}</view>
    <!-- input输入框 -->
    <input class="pop03_text" focus="true" confirm-type="done" maxlength="4" value="{{code}}"
      bindinput="getCodeValue" />
  </view>
  <view class="pop03_btns flex-row ">
    <view catchtap="closeModal">取消</view>
    <view>确定</view>
  </view>
</view>

// pages/subPack/customIpt/index.js
Page({

  data: {
    show_input: false,
    code: '', 

  },


  onShow: function () {

  },
  // 
  getCodeValue(e) {
    this.setData({
      code: e.detail.value,
    })
  },
  closeModal() {
    this.setData({
      show_input: false
    })
  },
  showCode() {
    this.setData({
      show_input: true
    })
  }

})

4.更多小程序源码，关注苏苏的码云，持续更新，共同进步~