原理：

　　一个真正的可以输入的input框，opacity： 0，设定位层级；（视图不可见的）

　　再来6（n）个input，readyonly,用来显示，type为password，设置好样式；（视图可见的）

　　代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>手机端六位密码输入</title>

        <script src="http://zeptojs.com/zepto.min.js"></script>

        <style>

            * {

                padding: 0px;

                margin: 0px;

            }

            input {

                border: none;

                outline: none;

                background: none;

            }

            #pwd-box {

                width: 310px;

                height: 48px;

                position: relative;

                border: 1px solid #9f9fa0;

                border-radius: 3px;

                overflow: hidden;

                margin: 10px auto;

            }

            #pwd-box input[type="number"] {

                width: %;

                height: %;

                color: transparent;

                /*letter-spacing 属性增加或减少字符间的空白,字间距*/

                letter-spacing: 35px;

                position: absolute;

                top: ;

                left: ;

                border: none;

                font-size: 18px;

                filter: alpha(opacity=);

                -moz-opacity: ;

                -khtml-opacity: ;

                opacity: ;

                z-index: ;

                outline: none;

            }

            #pwd-box .fake-box {

                width: %;

                height: %;

                display: -webkit-box;

                display: -webkit-flex;

                display: -ms-flexbox;

                display: flex;

                -webkit-flex-flow: row;

                -ms-flex-flow: row;

                flex-flow: row;

            }

            #pwd-box .fake-box input {

                -webkit-box-flex: ;

                -webkit-flex: ;

                -ms-flex: ;

                flex: ;

                width: %;

                height: %;

                border: none;

                border-right: 1px solid #e5e5e5;

                text-align: center;

                font-size: 30px;

                float: left;

            }

            #pwd-box .fake-box input:nth-last-child() {

                border: none;

            }

        </style>

    </head>

    <body>

        <div id="pwd-box">

            <input type="number" maxlength="" class="pwd-input" id="pwd-input" autofocus>

            <div class="fake-box">

                <input type="password" readonly="">

                <input type="password" readonly="">

                <input type="password" readonly="">

                <input type="password" readonly="">

                <input type="password" readonly="">

                <input type="password" readonly="">

            </div>

        </div>

        <script>

            $("#pwd-input").on("input", function() {

                // trim(): 去两边空格的方法；

                var pwd = $(this).val().trim();

                var len = pwd.length;

                for(var i = ; i < len; i++) {

                    $(".fake-box input").eq(i).val(pwd[i]);

                }

                $(".fake-box input").each(function() {

                    var index = $(this).index();

                    if(index >= len) {

                        $(this).val("");

                    }

                });

                if(len == ) {

                    //执行其他操作

                    setTimeout(function() {

                        alert('订单已提交')

                    }, )

                }

                if(len > ) {

                    pwd = pwd.substr(, );

                    $(this).val(pwd);

                    len = ;

                }

            });

        </script>

    </body>

</html>

input依次输入密码的更多相关文章

  1. jquery插件--在input下输入密码时提示大写锁定键

    //密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...

  2. Python初体验（一）—【配置环境变量】【变量】【input】【条件语句】【循环语句】

    写在前面的: 作为一个控制专业的女研究生,不知道每天在研究什么,但总归逃脱不了码代码的命运.之前也学习过一些C语言.C++,基础嘛,稍稍微有一些.本不想走上码农的道路,天真烂漫的过此生(白日梦过程中. ...

  3. (13)input输入函数

    (1)input 等待用户动态输入一个值,注意得到的值是一个字符串类型 提示用户输入用户名和密码: 如果用户名是admin , 并且密码是000 , 提示用户恭喜你,登陆成功 否则提示用户名或密码错误 ...

  4. input用法，永远等待，直到用户输入值赋值给一个东西。

    input用法,永远等待,直到用户输入值赋值给一个东西. n1 = input('请输入用户名:') n1 = input('请输入密码:') print(n1) print(n1)

  5. python常用执行方式&变量&input函数

    linux系统中执行py文件方式:  ./a.py 需要执行权限 chmod -R 777(最大权限) 常用执行方式: 1. ./a.py2. python a.py 文件内部头加上 #!/usr/b ...

  6. 2018年11月10日 input,print,pass 用法，条件语句+字符串

    name=input('请输入用户名')#永远等待用户输入 password=input('请输入密码') print(name) print(password) 变量定义的规则: 变量名只能是 字母 ...

  7. python基础知识input到while循环

    j周笔记 输入与输出 1.输入 input ('请输入内容')= 字符串 2.输出 print(输出到控制台) 变量vairable               变量就是相当于我们人的名字 1.名字 ...

  8. 常量、变量；基本数据类型；input()、if、while、break、continue

    一.编译型语言和解释型语言区别:编译型:一次性将所有程序编译成二进制文件 缺点:开发效率低,不能跨平台 优点:运行速度快. 例如:C,C++等解释型:当程序执行时,一行一行的解释 优点:开发效率高,可 ...

  9. 180908 input

    input while if # -*- coding:utf-8 -*- flag = 0 while flag == 0 : username = input('请输入用户名:\n') passw ...

随机推荐

  1. Centos下快速安装Nginx

    1.准备工作 选首先安装这几个软件:GCC,PCRE(Perl Compatible Regular Expression),zlib,OpenSSL. Nginx是C写的,需要用GCC编译:Ngin ...

  2. 使用Vue和thrift建立前后端交互的demo

    初识thrift thrift 是 facebook 于2007年开发的一款跨平台 RPC(Remote Procedure Call) 软件框架, 它可以在多种平台上进行无缝交互,数据传输使用二进制 ...

  3. Codeforces785E - Anton and Permutation

    Portal Description 对一个长度为\(n(n\leq2\times10^5)\)的数列\(a\)进行\(m(m\leq5\times10^4)\)次操作,数列初始时为\(\{1,2,. ...

  4. 前端时间戳timestamp相关总结：

    一.JavaScript获取当前时间戳的方法 第一种方法:var timestamp = Date.parse(new Date());结果:1280977330000 第二种方法:var times ...

  5. SPFA+SLF+LLL优化模板

    #include<algorithm> #include <iostream> #include <cstdlib> #include <cstring> ...

  6. Luogu P2888 [USACO07NOV]牛栏Cow Hurdles

    题目描述 Farmer John wants the cows to prepare for the county jumping competition, so Bessie and the gan ...

  7. Hadoop分布式集群配置

    硬件环境: 安装一个Hadoop集群时,需要专门指定一个服务器作为主节点. 三台虚拟机搭建的集群:(搭建集群时主机名不能一样,主机名在/etc/hostname修改) master机器:集群的主节点, ...

  8. 6.3 x86处理器如何处理MSI-X中断请求

    PCIe设备发出MSI-X中断请求的方法与发出MSI中断请求的方法类似,都是向Message Address所在的地址写Message Data字段包含的数据.只是MSI-X中断机制为了支持更多的中断 ...

  9. PCI和PCIE插槽有什么区别?

    PCI是Peripheral Component Interconnect(外设部件互连标准)的缩写,它是目前个人电脑中使用最为广泛的接口,几乎所有的主板产品上都带有这种插槽.PCI插槽也是主板带有最 ...

  10. R语言︱数据集分组、筛选(plit – apply – combine模式、dplyr、data.table)

    R语言︱数据集分组 大型数据集通常是高度结构化的,结构使得我们可以按不同的方式分组,有时候我们需要关注单个组的数据片断,有时需要聚合不同组内的信息,并相互比较. 一.日期分组 1.关于时间的包都有很多 ...