小程序中数字验证码的实现
连胜老师折腾了一个数字验证码的demo，主要是模拟实现客户端上的短信验证码效果。
先说说为什么要折腾这个demo，之前经常有用户反馈，说是删除自己的记录时，能否给个强一点儿的提示，因为确认框弹出后，大家会习惯性的点击确认，内容可能根本没有看清楚，导致很多内容被误删除了。
因此，连胜老师在小小签到里面特意加了一个验证码确认删除功能，防止用户误删除，如下：
之前为了快速上线，就随便做了个样式，这两天专门折腾了一下数字验证码的DEMO，这里给大家分享一下。
实现思路： 1、input设置为透明，font-size设置为0，当点击canvas时，让input自动获取焦点，监听bindinput事件，然后调用canvasDraw方法，把内容写在canvas里。 2、和上面的思想一样，只是把canvas换成了image组件 & 4个view，每个view定位到指定位置，监听input的bindinput事件，把内容写入到4个view中即可。
一、用canvas方式实现
<view class="wrapper">
<view class='title'>一、canvas方式实现</view>
<view class='input-box'>
<canvas class='input-canvas' canvas-id="numberCanvas" bindtap='tapNumber'></canvas>
<input type='number' class='input-text' bindinput='inputNumber' focus='{{focus}}' maxlength='4'></input>
</view>
</view>Page({
data: {
focus: false,
}, onLoad: function () {
}, tapNumber: function(){ this.setData({
focus: true,
})
}, inputNumber: function(e){ var val = e.detail.value, len = val.toString().length; var str = ''; for(var i=0;i<len;i++){
str += val[i]+' ';
}
this.canvasDraw(str);
}, canvasDraw: function(str){ var ctx = wx.createCanvasContext('numberCanvas'); ctx.setFillStyle("#11cbe4"); ctx.setFontSize(38); ctx.fillText(str, 12, 38); ctx.draw()
}
})二、image + position方式实现
<view class="wrapper">
<view class='title'>二、image + position方式实现</view>
<view class='input-box'>
<image class='input-img' src='/images/1.png'></image>
<view class='input-num input-num-{{index}}' wx:for="{{numbers}}" wx:key="{{index}}" bindtap='tapNumber'>{{item}}</view>
<input type='number' class='input-text' bindinput='inputNumber' focus='{{focus}}' maxlength='4'></input>
</view>
</view>Page({
data: {
focus: false,
numbers: ['2', '5', '8', ''],
}, onLoad: function () {
}, tapNumber: function () { this.setData({
focus: true,
})
}, inputNumber: function (e) { var val = e.detail.value, len = val.toString().length; var numbers = ['', '', '', '']; for (var i = 0; i < len; i++) {
numbers[i] = val[i];
} this.setData({
numbers: numbers,
})
},
})
好看帅气的数字验证码，防止误删除，可以派上用场了。如果你有更好的实现方式，欢迎和连胜老师一起讨论。
《完》
往期回顾
1.推荐 | 超好用的报名工具小程序，值得收藏
2.小程序技术杂谈 & 手写签名DEMO
3.小程序中敏感词过滤——前端实现
4.开发小程序被问到最频繁的问题（上）
5.零基础入门小程序 & 实战经验分享
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2018-07-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
