JS如何实现手机端输入验证码效果

之前在“掘金”上看到这样一个demo 我觉得很有意思,于是今天把它搬下来,记在自己的“小本本”里
也许会对以后的项目有点用,若要自己去实现这样一个案例也能实现,但是可能没有那么“妙”。

想法:

1、使用label标签做显示验证码的框,

2、然后每个label for属性指向同一个 id 为vcode 的input,

3、为了能够触发input焦点, 将input 改透明度样式隐藏,

4、这样就实现了 点击label触发 input焦点,调用键盘。

运行效果:

示例代码:

结构部分html:

<div id="app" class="app">
  <h2 class="heading-2">验证码:</h2>
  <div class="v-code">
    <input
        ref="vcode"
        id="vcode"
        type="tel"
        maxlength="6"
        v-model="code"
        @focus="focused = true"
        @blur="focused = false"
        :disabled="telDisabled">

    <label
        for="vcode"
        class="line"
        v-for="item,index in codeLength"
        :class="{'animated': focused && cursorIndex === index}"
        v-text="codeArr[index]"
    >
    </label>
  </div>
</div>

css部分:

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background-color: #ffffff;
      font-family: -apple-system, PingFang SC, Hiragino Sans GB, Helvetica Neue, Arial;
      -webkit-tap-highlight-color: transparent;
    }
    .app {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 60px;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }
    .heading-2 {
      color: #333333;
    }
    .v-code {
      margin-top: 20px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      width: 280px;
      margin-left: auto;
      margin-right: auto;
    }
    .v-code input {
      position: absolute;
      top: 200%;
      opacity:0;
    }
    .v-code .line {
      position: relative;
      width: 40px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      font-size: 28px;
    }
    .v-code .line::after {
      display: block;
      position: absolute;
      content: '';
      left: 0;
      width: 100%;
      bottom: 0;
      height: 1px;
      background-color: #aaaaaa;
      transform: scaleY(.5);
      transform-origin: 0 100%;
    }
    .v-code .line.animated::before {
      display: block;
      position: absolute;
      left: 50%;
      top: 20%;
      width: 1px;
      height: 60%;
      content: '';
      background-color: #333333;
      animation-name: coruscate;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-fill-mode: both;
    }
    @keyframes coruscate {
      0% {
        opacity: 0
      }
      25% {
        opacity: 0
      }
      50% {
        opacity: 1
      }
      75% {
        opacity: 1
      }
      to {
        opacity: 0
      }
    }
  </style>

Javascript部分

1、通过CDN引入vue.js

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>

2、代码

var app = new Vue({
    el: '#app',
    data: {
      code: '',
      codeLength: 6,
      telDisabled: false,
      focused: false
    },
    computed: {
      codeArr() {
        return this.code.split('')
      },
      cursorIndex() {
        return this.code.length
      }
    },
    watch: {
      code(newVal) {
        this.code = newVal.replace(/[^\d]/g,'')
        if (newVal.length > 5) {
          // this.telDisabled = true
          this.$refs.vcode.blur()
          setTimeout(() => {
            alert(`vcode: ${this.code}`)
          }, 500)
        }
      }
    },
  })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS 验证码功能的三种实现方式

    摘要: 我们在做一些后台系统的登录验证的时候.难免会用到验证码功能,来辅助进行验证,提高安全性,在我们日常生活中,验证方式无处不在,最多的是短信验证码的方式,通过点击发送验证码,然后手机接收短信,填写验证码才能登陆成功,但是也有一些其他验证码功能也在使用,所以,我就想着来集中记录一下,希望对大家有所帮助... 一.数字短信验证码 思路: a.两个文本框+一个获取验证码按钮,文本框用来输入手机号和获取到的验证码,按钮负责点击和记录倒计时: b.js书写定时器setTimeout,进行60秒验证码失

  • js实现随机8位验证码

    开发思路: 1.画出放置验证码的模块.一个写有"看不清-"的小块,以及输入验证码的文本框 2.获取各个模块 3.封装一个函数Yan_ma(),设置验证码为8位,里面含有数字,小写字母,小写字母和中文.每种类型出现的可能性为25%. 4.随机数字在0-9,之间.对Math.ramand()向下取整. 5.随机大小写字母使用fromCharCode() 方法:将 Unicode 编码转为一个字符,例如: var n = String.fromCharCode(65); cosole.log

  • php/JS实现的生成随机密码(验证码)功能示例

    本文实例讲述了php/JS实现的生成随机密码(验证码)功能.分享给大家供大家参考,具体如下: PHP写法: //A-Z a-z 0-9 !#$%^&* $str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%^&*"; //生成随机字符 function createPwd($str,$len){ $pwd = ''; $strlen = strlen($str); for($i

  • js+canvas实现滑动拼图验证码功能

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块. <canvas width="310" height="155" id="canvas"></canvas> <canvas width=&q

  • JavaScript生成随机验证码代码实例

    利用canvas制作一个随机验证码: 1.clearRect:context.clearRect(x,y,width,height);清空给定矩形内的指定像素 2.fillStyle:设置画笔的颜色 3.rotate(deg):旋转角度,以弧度旋转(弧度=degrees*Math.PI/180 ) 4.translate(): 方法重新映射画布上的位置 5.Math.random():获取0-1之间的一个随机数,不包含1 <!-- HTML --> <!DOCTYPE html>

  • js实现登录注册框手机号和验证码校验(前端部分)

    开发的很多场景中都会用到手机号的校验和验证码的校验,具体实现如下 <div> <input type="text" name="phonenumber" placeholder="请输入您的手机号码" /> <input type="text" name="verify" placeholder="请输入验证码" /><input type=&q

  • JS实现点击发送验证码 xx秒后重新发送功能

    用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<scrip

  • JS验证码实现代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <script language="javascript"> var code; //在全局 定义验证码 function createCode() { //创建验证码函数 code = ""; var codeLength =4;//验证码的长度 var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h

  • JS如何实现手机端输入验证码效果

    之前在"掘金"上看到这样一个demo 我觉得很有意思,于是今天把它搬下来,记在自己的"小本本"里 也许会对以后的项目有点用,若要自己去实现这样一个案例也能实现,但是可能没有那么"妙". 想法: 1.使用label标签做显示验证码的框, 2.然后每个label for属性指向同一个 id 为vcode 的input, 3.为了能够触发input焦点, 将input 改透明度样式隐藏, 4.这样就实现了 点击label触发 input焦点,调用键盘.

  • JS实现的手机端精简幻灯片效果

    本文实例讲述了JS实现的手机端精简幻灯片效果.分享给大家供大家参考,具体如下: var curIndex = 0; var timeInterval = 4000; var arr = new Array(); arr[0] = "fukeb.jpg"; arr[1] = "baopi.jpg"; arr[2] = "renliub.jpg"; setInterval(changeImg, timeInterval); function chan

  • JS实现PC手机端和嵌入式滑动拼图验证码三种效果

    PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如登陆页面 <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="http://static.geetes

  • 原生js仿写手机端下拉刷新

    本文实例为大家分享了js仿写手机端下拉刷新的具体代码,供大家参考,具体内容如下 话不多说先看效果图: 当下拉小于40px时显示文字: 当下拉大于40px时现实文字 松开时显示文字 实现原理 <div class="content"> <div class="left"></div> <div class="top"> <p id="p"></p> <

  • 原生js实现html手机端城市列表索引选择城市

    本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下 html部分: <div class="cityPage"> <div class="cityContent"> <div class="inputBox"> <input type="text" placeholder="中文 / 拼音首字母" id="findc

  • slideToggle+slideup实现手机端折叠菜单效果

    折叠菜单的效果,网上有很多的插件,比如bootstrap的 Collapse ,很好用也很简单,但是如果你使用的不是bootstrap框架,就会造成很多不必要的麻烦,比如默认样式被修改,代码冗余等等,一般网上也有很多基于jQuery的插件,但是也都过于繁琐,今天我就给大家说下,使用jQuery自带的函数,实现这种效果,话不多少,直接上代码: HTML部分: <div class="box"> <!-- 内容--> <ul class="inner

  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

  • JS/jQ实现免费获取手机验证码倒计时效果

    最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

  • 基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

    最近做微信端的页面遇到了一个之前没有遇到过的一个页面,刚开始放在那没有去写,可是等其他页面都写好的时候,还是得回过头来研究这个页面问题,刚开始我请教了公司的移动研发,从他那里得到启发,最终实现了这个效果,先把效果图展示出来给大家看看 效果图: 输入验证码 粘贴图片输入完毕 下面就把实现过程奉献给大家 第一步:编写HTML代码 <div class="main-out"> <p class="identifying-title">输入企业提供的

  • JS手机端touch事件计算滑动距离的方法示例

    本文实例讲述了JS手机端touch事件计算滑动距离的方法.分享给大家供大家参考,具体如下: 计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下: function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(event){ var touch = event.tar

随机推荐