原理：

　　一个真正的可以输入的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. PHP二维数组排序(感谢滔哥)

    滔哥原创 /* _ooOoo_ o8888888o 88" . "88 (| -_- |) O\ = /O ____/`---'\____ .' \\| |// `. / \\|| ...

  2. 在linux系统中

    A .etc下放置配置文件 B./var下放置日志文件 C./root超级用户主目录 D./home 使用者家目录 /bin  二进制执行文件,也就是命令文件 /etc 下存放的是配置文件 /dev ...

  3. javascript垃圾收集与性能问题

    一.垃圾收集 JavaScript具有自动垃圾收集功能,也就是说,执行环境会负责管理代码所占用的内存. 不同于C和类C语言,这些语言都需要手动监听内存的使用情况.JavaScript实现了自动管理内存 ...

  4. FMECA分析

    FMECA是针对产品所有可能的故障,并根据对故障模式的分析,确定每种故障模式对产品工作的影响,找出单点故障,并按故障模式的严重度及其发生概率确定其危害性.所谓单点故障指的是引起产品故障的,且没有冗余或 ...

  5. nginx重写rewrite的[emerg] unknown directive

    今天写nginx的重写规则.怎么写总是报这个错误.

  6. Django学习-7-ORM操作

    select * from tb where id > 1    # 对应关系     models.tb.objects.filter(1id__gt=)         models.tb. ...

  7. UEFI模式 Thinkpad t470p Ubuntu 16.04 LTS

    准备阶段 使用官方推荐的Rufus制作U盘启动盘 在Windows 10系统下压缩出来一些空间(60G),不要分配盘符 系统设置 在Bios中关闭secure boot (设置为Disenabled) ...

  8. 使用 LINQPad 助力 LINQ 学习

    简介一图示意 简介 LINQPad 是一款学习 LINQ,优化 SQL 的好助手. 它的一大特点是内置了新版<C# in a Nutshell>的全部 LINQ 示例,不管是配合原书进行练 ...

  9. ASP.NET 初识Cookie

    1.ASP.NET中使用Cookie 0.说明 Cookie存在客户端电脑上,Session存在服务器上,所以保存登录信息等敏感信息时不能使用Cookie,用户个性化设置可以使用Cookie 1.新建 ...

  10. Context.Response.End(); VS HttpContext.Current.ApplicationInstance.CompleteRequest();

    今天遇到一個問題,頁面Client端send一個ajax請求,然後在server端返回一個json的字符串 $.ajax({ url: "xxxxx.aspx", type: &q ...