小程序中数字验证码的实现

连胜老师折腾了一个数字验证码的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.零基础入门小程序 & 实战经验分享

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2018-07-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏非著名程序员

Java开发人员必须重视HTML5的5点理由

概述:随着浏览器技术的改进,尤其是采用了HTML5之后,Java开发中的很多困难得到解决。本文盘点了HTML5能为Java开发人员带来的5点好处。 过去,Ja...

2669
来自专栏腾讯大讲堂的专栏

玩转HTML5移动页面(优化篇)

承接上期讲堂君推荐的《玩转HTML5移动页面(动效篇)》,动效篇说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细...

5527
来自专栏IT派

【前端必看】2017 年 JavaScript 全面崛起大运势

最受欢迎项目 ? 下面是年度最流行的项目,不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40...

3485
来自专栏数据小魔方

Xcelsius(水晶易表)系列17——动态地图应用

本节教程非常简单,一个美国地图同时作为数据呈现与选择器,控制统计图呈现各州的对应时间段的税收数额指标。 案例截图如下: ? 数据文件如下: ? 简要分析下数据...

3039
来自专栏BeJavaGod

Java后端实现图片压缩技术(赞赏功能已开通,欢迎测试,噗~!)

今天来说说图片压缩技术,为什么要使用图片压缩,图片上传不就完事了吗?对的,这在几年前可以这么说,因为几年前还没有现在这么大的并发,也没有现在这么关注性能。 如今...

4485
来自专栏编程微刊

微信小程序模仿分类导航实现多个tab 页

2203
来自专栏编程微刊

移动端iPhone系列适配问题的一些坑

2192
来自专栏前端笔记

【WP主题】Kratos 文章样式使用说明 。

为了拓展 WordPress 原有的文章编辑器功能,三哥额外添加了一些配合主题使用的小功能(网易云音乐、优酷视频、腾讯视频、哔哩哔哩、Youtube、进度条、下...

4109
来自专栏晓麦微信小程序

微信小程序textarea 上下移动文本框文字不动的解决方法

搬砖的时候弄了别人写好的页面过来,然后在小程序开发工具上啥事都没有,到了手机上打开就发现文本框都移上去了,文字怎么还留在原地,而且还能编辑,最大的问题是这还是客...

2329
来自专栏分布式系统和大数据处理

ppk谈JavaScript

这本书买得比较早,断断续续读了几次。这次花了一周时间重新读了一遍。总得来说,这本书中的部分理念,不说完全过时,但在现在的技术环境下也很难实现了。例如书中提到的“...

1182

扫码关注云+社区

领取腾讯云代金券