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


Posted in Javascript onMay 13, 2020

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

想法:

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

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

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

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

运行效果:

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

示例代码:

结构部分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)
        }
      }
    },
  })

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

Javascript 相关文章推荐
javascript之ESC(第二类混淆)
May 06 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
新手快速入门JavaScript装饰者模式与AOP
Jun 24 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 #Javascript
Vue关于组件化开发知识点详解
May 13 #Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 #Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 #Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 #Javascript
JavaScript 接口原理与用法实例详解
May 12 #Javascript
ES5新增数组的实现方法
May 12 #Javascript
You might like
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
JS交互点击WKWebView中的图片实现预览效果
2018/01/05 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
基于python实现学生管理系统
2018/10/17 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
python ubplot使用方法解析
2020/01/10 Python
python将音频进行变速的操作方法
2020/04/08 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
反邪教观后感
2015/06/11 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
教师听课学习心得体会
2016/01/15 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
600字作文之感受大自然
2019/11/27 职场文书