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代码
Aug 13 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
详解离线安装npm包的几种方法
Nov 25 Javascript
vue实现带复选框的树形菜单
May 27 Javascript
socket在egg中的使用实例代码详解
May 30 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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 mail()函数使用及配置方法
2014/01/14 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
javascript 简练的几个函数
2009/08/29 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
Python 中PyQt5 点击主窗口弹出另一个窗口的实现方法
2019/07/04 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
python扫描线填充算法详解
2020/02/19 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
工程总经理工作职责
2013/12/09 职场文书
励志演讲稿200字
2014/08/21 职场文书
学校开除通知书
2015/04/25 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
小学信息技术教学反思
2016/02/16 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python