专栏首页微信小程序开发小程序中数字验证码的实现

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

连胜老师折腾了一个数字验证码的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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序中带图片modal的实现

    前言:做小程序经常会遇到弹框提示,大家应该首选wx.showModal,标题、内容、button内容和颜色都可以自己定义,可以说是满足90%的dialog需求。...

    连胜
  • swiper组件添加左右箭头

    前言:小程序官方swiper组件并未提供带左右箭头功能,但有些时候还是想把左右箭头添加上,今天连胜老师就给大家分享一下自己的实现方式。 思路很简单:在swip...

    连胜
  • 小程序中图片高度等比缩放

    前言:小程序中的image组件,有默认的宽度(320px)和高度(240px),如果想让图片按比例显示,那就需要自己设置宽度 & 高度。今天来说一下图片等比缩...

    连胜
  • lodop打印技巧与注意事项 原

    打印前的准备工作 首先用Html和css把完整的打印页面写出,注意需要输入内容的地方要用input输入框,

    tianyawhl
  • 完善的输入框监听方案:兼容、高效和组合输入友好

    文章分享了,如何一步步优化输入框的监听事件,以达到兼容、高效和组合输入友好等目标。

    前端博客 : alili.tech
  • 关于html的input元素,property和attribute的区别

    之前在项目中遇到一个很tricky的关于html的input元素的问题,个人觉得挺有意思,于是记录下来。这个问题也是在ui的自动化测试中,可能会碰到的一个问题。

    Bruce Li
  • 表格内,设置许多元素的大小时,js的速度慢的办法

    思路1:设置td为relative,input为absolute,然后设置input大小为td的大小。

    申君健
  • 文件上传C:\fakepath\解决方案

    1.设置IE:工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即...

    HUC思梦
  • python中input()与raw_input()的区别到底是啥?

    首先先给出总结:input () = int(raw_input()) 有图有真相!!! ? 先看看input的例子: ? 可见用input键入得到int类型的...

    marsggbo
  • IOS系统input输入框为readonly时, 隐藏键盘上的上下箭头

    业务中在一定场景中会将input 设置为只读状态,在IOS safari上当input 输入框focus 时,仍会出现键盘上的上下箭头,这种用户体验非常不好,如...

    Daotin

扫码关注云+社区

领取腾讯云代金券