原理：

　　一个真正的可以输入的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. MysqL 磁盘写入策略之innodb_flush_log_at_trx_commit

    本文从参数含义,性能,安全角度阐述两个参数为不同的值时对db 性能,数据的影响,引擎是Innodb的前提下. 取值:0/1/2 innodb_flush_log_at_trx_commit=0,表示每 ...

  2. 为什么要使用Docker？

    作为一种新兴的虚拟化方式,Docker跟传统的虚拟化方式相比具有众多的优势. 更高效的利用系统资源 由于容器不需要进行硬件虚拟及运行完整操作系统等额外开销,Docker对系统资源的利用率更高.无论是应 ...

  3. 开启了1000个线程并发去查询elasticsearch把es搞挂了

    org.elasticsearch.transport.RemoteTransportException: [spd-2][172.**.**.**:9300][indices:data/read/s ...

  4. Luogu P1522 牛的旅行 Cow Tours

    题目描述 农民 John的农场里有很多牧区.有的路径连接一些特定的牧区.一片所有连通的牧区称为一个牧场.但是就目前而言,你能看到至少有两个牧区通过任何路径都不连通.这样,Farmer John就有多个 ...

  5. 使用java实现阿里云消息队列简单封装

    一.前言 最近公司有使用阿里云消息队列的需求,为了更加方便使用,本人用了几天时间将消息队列封装成api调用方式以方便内部系统的调用,现在已经完成,特此记录其中过程和使用到的相关技术,与君共勉. 现在阿 ...

  6. R语言︱逻辑运算

    R软件包含两个逻辑值,TRUE和FALSE.在其他编程语言中也称为布尔值(Boolean values).布尔向量就是充满着逻辑值的逻辑向量.那么有如何的应用呢? 1.比较运算可以产生逻辑值  > ...

  7. mysql事务介绍

    什么是事务 一组sql语句操作单元组内所有sql完成一个业务如果整组成功,意味着组内的全部的sql成功如果其中任何一个失败,意味着整个操作失败 数据回到操作前的状态 事务的特点 1.多条sql语句组成 ...

  8. Meet Python

    关于python 入门书<Head First Python>的一些读书笔记,用以备忘. 下载安装Python 下载地址: https://www.python.org/downloads ...

  9. 通过ajax记录网站UV、PV数

    1.通过jquery记录网站UV.PV数据 util.track = { log: function () { var referrer = util.browser.getReferrer(), h ...

  10. spring+jidi读取property的配置文件

    在Spring项目中,你可能需要从properties文件中读入配置注入到bean中,例如数据库连接信息,memcached server的地址端口信息等,这些配置信息最好独立于jar包或者war包, ...