小程序多个输入框输入验证码功能 实现

微信小程序 专栏收录该内容
18 篇文章 0 订阅

老套路,先上图 

<view class="check">
  <!-- 输入核验码 -->
  <view class="query">
    <view class="query_item_name">请输入核验码</view>
    <view class="query_num_block">
        <input type='number' class="num_item_block" wx:for="{{inputLen}}" wx:key="{{index}}" disabled bindtap='onFocus' value="{{iptValue.length>=index+1?iptValue[index]:''}}" />
    </view>
    <input name="password" password="{{true}}" class='hidden_ipt' maxlength="{{inputLen}}" focus="{{isFocus}}" bindinput="setValue"></input>
    <view class="confirm" bindtap='examine'>确认</view>
  </view>
</view>

 

.query{
  padding-top:90rpx;
}
.query .query_item_name{
  font-family: PingFangSC-Regular;
  font-size: 30rpx;
  color: #737586;
  letter-spacing: 0;
  text-align: center;
}
.query_num_block{
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  padding-left:36rpx;
  padding-right:36rpx;
  margin:80rpx auto 110rpx;
}
.check .confirm{
  margin:auto;
  width:200rpx;
  height: 68rpx;
  background: #F86221;
  border-radius: 33px;
  text-align: center;
  line-height: 68rpx;
  font-family: PingFangSC-Medium;
  font-size: 30rpx;
  color: #FFFFFF;
  letter-spacing: 0;
}
.num_item_block{
  height: 116rpx;
  width:80rpx;
  border:1px solid #cdcdcd;
  font-family: PingFangSC-Regular;
  border-radius: 8rpx;
  line-height: 116rpx;
  text-align: center;
  font-size: 36rpx;
  color: #25252B;
}
.hidden_ipt{
  height: 0rpx;
  width:0rpx;
  border:none;
  margin:0;
}
Page({
  /**
   * 页面的初始数据
   */
  data: {
    inputLen: 7,
    iptValue: "",
    isFocus: false,
  },
  onFocus: function (e) {
    var that = this;
    that.setData({ isFocus: true });
  },
  setValue: function (e) {
    var that = this;
    that.setData({ iptValue: e.detail.value });
  },
})

 

  • 4
    点赞
  • 3
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值