input输入框模拟验证码输入效果

原创 2018年04月16日 16:14:07

今天看到一个帖子,说到用input输入框模拟滴滴、摩拜等app验证码输入效果,提到了一个方案:

1、利用input来获得焦点,自动调用手机的数字键盘

2、实际将输入框用透明度隐藏

3、用label的for属性与input联动来显示输入的数字

于是照着这个思路实际操作了一番,还是发现了不少问题。

首先页面布局:

<div class="container">
    <h2>输入验证码:</h2>
    <div class="vcode" id='vertifycode'>
        <input type="tel" maxlength='6' ref='code' class='code' id='code'>
        <div class="labels">
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
            <label class='label' for="code"></label>
        </div>
    </div>
</div>

样式:

@keyframes animate {
            100% {
                opacity: 0;
            }
        }
        .container{
            padding: 5%;
        }
        .vcode{
            position: relative;
            width: 100%;
            overflow: hidden;
        }
        .code{
            width: 100%;
            padding: 0;
            height: 40px;
            font-size: 35px;
            overflow: hidden;
            border: none;
            outline: none;
            opacity: 0;
            margin-left: -100%; // ios上透明度为0时依然有光标
            -webkit-tap-highlight-color: transparent;
        }
        .labels{
            display: flex;
            display: -webkit-flex;
            width: 100%;
            height: 40px;
            justify-content: space-between;
            -webkit-justify-content: space-between;
            margin-top: -40px;
            -webkit-tap-highlight-color: transparent;// 解决ios点击灰色阴影的问题
        }
        .label{
            height: 34px;
            width: 12%;
            border-bottom: solid 2px #313131;
            float: left;
            color: #313131;
            font-size: 35px;
            text-align: center;
            padding-bottom: 4px;
        }
        .active:after{ // 伪类实现光标效果
            content: ' ';
            display: inline-block;
            height: 100%;
            width: 2px;
            background: #313131;
            animation: .8s animate infinite;
        }

注意点:

1、ios手机上input和lable都会出现点击有灰色背景闪动的问题,所以一定要给样式加上

-webkit-tap-highlight-color: transparent;

2、输入框的默认光标隐藏了后,用伪类实现光标效果:

.active:after{ // 伪类实现光标效果
            content: ' ';
            display: inline-block;
            height: 100%;
            width: 2px;
            background: #313131;
            animation: .8s animate infinite;
        }

3、ios上虽然input透明度已经设置为0了,但是当其获得焦点时,默认的光标依然存在


可以利用margin将整个input输入框隐藏来解决:

margin-left: -100%; 

样式写好了,就改进行逻辑处理了:

引入vue.js(vue确实好用)

<script src='./js/vue.min.js'></script>

更改页面布局:

<div class="container">
    <h2>输入验证码:</h2>
    <div class="vcode" id='vertifycode'>
        <input type="tel" maxlength='6' ref='code' class='code' id='code'
               @focus='focus=true'
               v-model='code'
               @blur='focus=false'
               :disabled='disabled'
        >
        <div class="labels">
            <label class='label' for="code"
                   :class='{active: focus===true && index===currentIndex}'
                   v-for='item,index in length'
                    v-text='arrCode[index]'>
            </label>
        </div>
    </div>
</div>

逻辑代码:

new Vue({
        el: '#vertifycode',
        data: {
            length: 6,
            currentIndex: 0,
            code: '',
            focus: false,
            arrCode: [],
            disabled: false
        },
        computed: {
            arrCode: function () {
                return this.code.split('');
            },
            currentIndex: function () {
                return this.code.length;
            }
        },
        watch: {
            code: function (newV,oldV) {
                var self = this;
                this.code = newV.replace(/[^\d]/g,''); // 限制非数字
                console.log(newV);
                if(newV.length >= 6) {
                    this.disabled = true;
                    this.$refs.code.blur();
                    setTimeout(function () {
                        alert('submit:'+self.code+'');
                    },500);
                }
            }
        }

数据说明:

length: 密码长度,根据实际需求设定;

currentIndex: 当前获得焦点的label的索引;

code: 输入的内容;

focus: 判断输入框的焦点状况;

arrCode:用于填充label标签内容;

disabled:控制输入框是否可用,输入6位验证码后禁用。


当输入长度等于6时,输入框失去焦点,自动提交数据,弹出提示框,实际效果:

         








版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dongguan_123/article/details/79961216

如何控制页面技巧----验证码的输入框和验证

控制页面技巧: 如果验证码的输入框和验证码图片不对齐的话,可以在中,放一个表格。代码如下:...
  • u013456370
  • u013456370
  • 2015-01-17 19:40:47
  • 1544

手机获取短信验证码——内置UI界面

我们平常写项目的时候,总是会遇到需要通过注册自己的账号,登陆获取数据,那么这个时候,可以通过Mob...
  • yummy22
  • yummy22
  • 2016-09-11 20:26:09
  • 1514

移动端短信验证码详解(一)

现在的短信验证码一般为4位或6位,则页面中会相应的显示4个或6个文本框, 当点击注册进入到输入验证码页面的时候,第一个框自动获取光标,依次输入,不可直接输入第三个或第四个框的值, input输入框...
  • mhlghy
  • mhlghy
  • 2017-03-28 19:05:51
  • 1549

移动端密码及验证码输入框

解决问题: 多个input框连续输入iOS键盘隐藏问题在ios由于focus事件默认被禁止,对于密码或验证码输入框,如果使用多个input框,每输入以为都会使键盘隐藏,输入下一位需要重新点击 inp...
  • StoneIT_ZL
  • StoneIT_ZL
  • 2017-09-12 15:39:14
  • 627

div模拟input实现输入框

因为一些原因,无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里,后来发现可以用带有contenteditable属性的div而不是input或者textarea来...
  • qq_36671474
  • qq_36671474
  • 2017-03-30 10:09:04
  • 7202

短信验证码实现流程

1、构造手机验证码:使用random对象生成要求的随机数作为验证码,例如4位验证码:1000~9999之间随机数; 2、使用接口向短信平台发送手机号和验证码数据,然后短信平台再把验证码发送到制定手机...
  • archer119
  • archer119
  • 2016-07-31 17:24:33
  • 4201

Android获取<em>验证码</em>自动填写文本框,完美兼容Android 6.0以上<em>手机</em>

Android获取<em>验证码</em>自动填写文本框,完美兼容Android 6.0以上<em>手机</em> 2017-12-08 上传...Android开发:使用Auto<em>Input</em>AuthCode快速实现自动填写<em>验证码</em> Android 自动填写验证...
  • 2018年04月16日 00:00

Android自定义View实现滴滴验证码输入框效果

使用自定义view完美实现Android滴滴验证码输入框效果
  • tiandiwuya
  • tiandiwuya
  • 2017-06-23 10:01:09
  • 1792

js 验证输入框中的验证码只能输入4位

function checkStrLong() {             var vstr = document.getElementById("txtYZ").value;          ...
  • lybwwp
  • lybwwp
  • 2013-04-27 15:42:29
  • 1929

手机号码验证 js input

手机号码验证 js input
  • qq_23329541
  • qq_23329541
  • 2017-06-16 11:15:22
  • 1532
收藏助手
不良信息举报
您举报文章:input输入框模拟验证码输入效果
举报原因:
原因补充:

(最多只允许输入30个字)