• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序开发日志-4、6位验证码输入框制作

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

下面来为大家讲讲在小程序上怎么用做一组6位验证码输入框。

先看看效果图:

 

 

 

要做到上面的效果并不难,先说说思路:

首先我们需要做两排输入框,一排用于获取焦点,一排用于填充。

 

 

 

 从上面的抽象的图画可以看出,单点击一排输入框的时候,也就是获取到了焦点,输入数字,将输入的内容分别拆分成一个个字符填充到第二排输入框中。

接下来要做的是将第一排输入框隐藏,并将输入的内容依次填充到第二排的6个输入框中。

一、如何将两排输入框合并?

我们只需要给第一排文本框设置宽高为0就可以了,这样整个输入框就被隐藏起来了。然后将第二排的6个文本框设置成不可输入(disabled)。

看一下标签文件:

<!--
  输入验证码
-->
<view class="insert-code">
  <view>
    <view class="insert-title">请输入验证码</view>
    <view class="insert-tips">验证码已发送至{{phoneNum}}</view>
  </view>
  <view>
    <view class="v-code flex-content">
        <block wx:for="{{6}}" wx:key="item">
            <input data-code="v" type="number" disabled catchtap="tapFn"></input>
        </block>
    </view>
    <input type="number" class="ipt" maxlength="6" focus="{{isVFocus}}" bindinput="showVCode"></input>
</view>

再看一下css文件:

.insert-code{
  padding: 48rpx;
}
.v-code{
  margin-top: 100rpx;
}
.insert-title{
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
}
.insert-tips{
  font-size: 24rpx;
  color: #959191;
  margin-top: 20rpx;
}
.v-code input{
  width: 75rpx;
  height: 72rpx;
  margin-right: 30rpx;
  padding-bottom: 8rpx;
  border: 2rpx solid #cccccd;
  text-align: center;
  color: #333333;
  font-size: 38rpx;
  border-radius: 10rpx;
}
.flex-content{
  display: flex;
  align-items: center;
}
.is-input{
  border-color: #079aff !important;
}
.ipt{
  height: 0;
  width: 0;
}
.c-blue{
  color: #079aff;
}
.again-tip{
  font-size: 28rpx;
  color: #959191;
}
.next-btn{
  margin-top: 80rpx;
}

二、如何将输入的内容显示出来

给隐藏的输入框添加监听输入事件(bindinput),将输入的字符循环遍历到第二排文本框中,这样我们就可以每输入一个字符,然后就渲染到6个文本框中相应的位置。

<!--
  输入验证码
-->
<view class="insert-code">
  <view>
    <view class="insert-title">请输入验证码</view>
    <view class="insert-tips">验证码已发送至{{phoneNum}}</view>
  </view>
  <view>
    <view class="v-code flex-content">
        <block wx:for="{{6}}" wx:key="item">
            <input data-code="v" class="{{vCodeValue.length === index && isVFocus ? \'is-input\' : \'\'}}" type="number" value="{{vCodeValue.length>=index+1 ? vCodeValue[index] : \'\'}}" disabled catchtap="tapFn"></input>
        </block>
    </view>
    <input type="number" class="ipt" maxlength="6" focus="{{isVFocus}}" bindinput="showVCode"></input>
</view>

在JS代码中的监听事件:

import request from \'../../utils/http\';
import utils from \'../../utils/utils\';
// pages/forget-psd/insert-code.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    vCodeValue: \'\',
    isVFocus: true,
    phoneNum: \'\',//手机号码
  },
  showVCode: function(e){
    const that = this;
    that.setData({
      vCodeValue: e.detail.value,
    });
  },
  tapFn(e){
    const that = this;
    that.setData({
      isVFocus: true,
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  
})

好了,这期内容先讲到这里。下期再见!

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
新手指南:顶象验证码如何接入微信小程序?发布时间:2022-07-18
下一篇:
小程序,验证码倒计时效果发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap