微信小程序 验证码 输入框效果(真是效果请在真机上查看):
wxml:
<!--pages/security-code/security-code.wxml--> <view class="signValidateShare"> <view class="bg"> <view class="time-wrap"> <view class="box"> {{title}} </view> </view> </view> <view class="container"> <scroll-view class="scroll-view" scroll-y scroll-top="{{scrollTop}}"> <view class="scroll-inner"> <view class="validataWrap"> <view class="title">请进行身份验证</view> <!-- <view class="des">请输入身份证 (<text class="identity-card">371311199301…</text>) 后6位</view> --> <view class="des">请输入身份证 (<text class="identity-card">{{tools.handleSliceIdCard(idCard)}}</text>) 后6位</view> <view class="nums"> <block wx:for="{{inputLength}}"> <input wx:key="{{index}}" value="{{inputValue.length - 1 >= index ? inputValue[index]: ''}}" type="number" disabled catchtap="handleInputTap"/> </block> <input class="hidden-input" type="number" focus="{{isFocus}}" maxlength="{{inputLength}}" bindinput="handleInputChange"></input> </view> <view hidden="{{hideTip}}" class="tip animated shake">您输入的信息有误</view> </view> <view class="btn-wrap"> <button class="{{isLight ? 'validata-btn light-btn' : 'validata-btn'}}" type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="{{isLight? 'handleValidata': null}}" hover-class="other-button-hover"> 验证 </button> </view> </view> </scroll-view> </view> </view> <wxs module="tools"> function handleSliceIdCard( idCard ){ if(!idCard) return ''; return idCard.slice(0, -6) + '...'; } module.exports = { handleSliceIdCard: handleSliceIdCard } </wxs>
wxss:
/* pages/security-code/security-code.wxss */ .signValidateShare { height: 100%; position: relative; overflow-x: hidden; font-family: PingFangSC-Regular; } .signValidateShare .percent { position: absolute; width: 100%; /* height: 6rpx; */ left: 0; top: 0; z-index: 1; } .signValidateShare .percent .des { position: absolute; /* right: 20rpx; */ font-size: 22rpx; color: rgba(255, 255, 255, 0.5); /* padding: 0 20rpx; */ } .signValidateShare .bg { position: absolute; width: 100%; height: 450rpx; background: #2792ff; z-index: -1; } .signValidateShare .no-pass { background: #fe4d62; } /* */ .signValidateShare .bg .time-wrap { padding-top: 80rpx; } .signValidateShare .bg .time-wrap .box { line-height: 45rpx; font-family: PingFangSC-Regular; font-size: 32rpx; color: #ffffff; padding: 0 20rpx; text-align: center; } .signValidateShare .bg .time-wrap .box>text { font-family: PingFangSC-Semibold; font-size: 30rpx; color: #ffffff; margin-left: .5em; } .signValidateShare .bg .time-wrap .bottom { font-size: 24rpx; color: rgba(255, 255, 255, 0.5); } .signValidateShare .bg .time-wrap .bottom>text:nth-child(1){ padding-right: 44rpx; } .signValidateShare .bg .time-wrap .bottom>text:nth-child(2){ padding-left: 44rpx; } .signValidateShare .container { height: calc(100% - 216rpx); margin-top: 216rpx; } .signValidateShare .container .scroll-inner { height: 100%; } .signValidateShare .container .scroll-inner .btn-wrap { margin-top: 150rpx; } .signValidateShare .container .scroll-inner .btn-wrap .validata-btn { width: 710rpx; height: 80rpx; line-height: 80rpx; background: #2792ff; font-size: 28rpx; color: #ffffff; } /* */ .signValidateShare .container .scroll-inner .btn-wrap .validata-btn { width: 710rpx; height: 80rpx; line-height: 80rpx; background: #e8eaec; font-size: 28rpx; color: #ffffff; border-radius: 12rpx; } .signValidateShare .container .scroll-inner .btn-wrap .validata-btn.light-btn { background: #2792ff; } .signValidateShare .container .scroll-view { height: 100%; box-sizing: border-box; } .signValidateShare .container .validataWrap { display: flex; flex-direction: column; box-sizing: border-box; background: #fff; margin: 0 20rpx 0; box-shadow: 0rpx 16rpx 40rpx -8rpx rgba(0, 40, 80, 0.1); border-radius: 12rpx; padding: 0 30rpx 30rpx; min-height: 560rpx; } .signValidateShare .container .validataWrap .title { margin-top: 74rpx; font-size: 40rpx; color: #17233d; line-height: 56rpx; } .signValidateShare .container .validataWrap .des { margin-top: 12rpx; font-size: 24rpx; color: #808695; line-height: 33rpx; } .signValidateShare .container .validataWrap .nums { display: flex; justify-content: center; height: 94rpx; margin-top: 130rpx; font-size: 60rpx; color: #17233d; } .signValidateShare .container .validataWrap .nums>input { width: 90rpx; height: 84rpx; margin-right: 20rpx; border-bottom: 1rpx solid #17233d; text-align: center; line-height: 84rpx; } .signValidateShare .container .validataWrap .nums>input:nth-last-of-type(2) { margin-right: 0; } .signValidateShare .container .validataWrap .nums>input.hidden-input { width: 0; height: 0; border: none; margin: 0; } .signValidateShare .container .validataWrap .des .identity-card { color: #2792ff; } .signValidateShare .container .validataWrap .tip { margin-top: 30rpx; font-size: 24rpx; color: #fe4d62; }
js:
// pages/security-code/security-code.js Page({ /** * 页面的初始数据 */ data: { inputLength: 6, //验证码长度 inputValue: '', //输入的验证码 isFocus: true, //聚焦 isLight: false, //btn 是否高亮 hideTip: true, // 错误提示 idCard: '350105199506138487', //身份证 title: '标题标题标题标题标题标题', //名称 }, // input 输入变化 handleInputChange(ev) { let val = ev.detail.value; //判断用户是否已经输入 let result = Boolean(val.length); this.setData({ isLight: result, inputValue: val }); }, // input 点击 聚焦 handleInputTap() { this.setData({ isFocus: true }); }, //身份证验证 handleValidata() { let userIn = this.data.inputValue; let real = this.data.idCard.slice(-6); this.setData({ hideTip: true }); //输入是否正确 if (userIn === real) { wx.showToast({ title: '验证成功', }) } else { this.setData({ hideTip: false }); } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //禁止转发 wx.hideShareMenu() }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { //加载数据 this.getCustomerInfo(); }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
思路:
1.页面+样式准备
设置验证码输入框样式,设置disabled 使其不可输入。
另外设置一个输入框隐藏其样式,使其不可见。
设置隐藏输入框的最大长度。
2.点击验证码输入框,使隐藏输入框为聚焦状态
3.使用bindinput事件 监听输入状态 获取value。
4.将value赋值到验证码输入框中
完整代码:https://github.com/PeachCoder/wechat-SecurityCodeInput/tree/master