原理：

　　一个真正的可以输入的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. 洛谷P3381 - 【模板】最小费用最大流

    原题链接 题意简述 模板题啦~ 题解 每次都以费用作为边权求一下最短路,然后沿着最短路增广. Code //[模板]最小费用最大流 #include <cstdio> #include & ...

  2. linux 搭建CA服务器 http+ssl mail+ssl 扫描与抓包

    搭建CA服务器 CA服务是给服务器发放数字证书,被通信双方信任,独立的第三方机构 国内常见的CA机构 中国金融认证中心(CFCA) 中国电信安全认证中心(CTCA) 北京数字证书认证中心(BJCA) ...

  3. Android设置View抖动动画

    在应用中,有时候我们要吸引用户去点击某些按钮,比如应用市场的推荐按钮,为了能够吸引用户主动点击而且不过分的打扰用户,最好的方法就是给我们想吸引用户注意的view添加一些抖动动画,比如这张图 这里我主要 ...

  4. Ubuntu 上查看硬件信息命令

    1.Mint 驱动程序管理器是由 Linux Mint 团队开发的一款系统工具软件,使得用户在Linux系统中可容易安装专有驱动,通过一个直观的界面.由于 Mint 驱动程序管理器具有独立性,它支持所 ...

  5. linux shell中获取mongodb最大连接数、内存使用情况等

    前两天接到了一个新的需求,需要在linux shell脚本中监控到mongodb最大连接数.内存使用情况等. 但是我对于linux shel很不了解,只是会一些简单常用的linux的操作而已,只要一顿 ...

  6. 高级DirectDraw

    使用高彩模式 上一章中说了可以用16位的色彩深度,但是16位的色彩深度的数据表示模式可以有两种:Alpha.5.5.5(or X.5.5.5) 和 5.6.5(这是16位色彩最常用的).对于使用哪种1 ...

  7. JBoss启动项目报错

    具体报错如下: WARNING: -logmodule is deprecated. Please use the system property 'java.util.logging.manager ...

  8. 【mongodb系统学习之五】mongodb启动最常用参数

    五.mongodb启动时其他常用参数的使用(都是选用): 1).--logappend,指定日志的写入方式为追加,强烈建议使用: 2).--port,指定mongodb的端口号,当不使用这个参数的时候 ...

  9. ORA-00904："T1"."AREA_ID" :标识符无效

    1.错误描述 ORA-00904:"T1"."AREA_ID" :标识符无效 00904 . 00000 - "%s:invalid identifi ...

  10. MySQL语法大全整理的自学笔记

    select * from emp; #注释 #--------------------------- #----命令行连接MySql--------- #启动mysql服务器 net start m ...