原理：

　　一个真正的可以输入的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下 SVN版本控制的安装（包括yum与非yum）

    一.yum安装 rpm -qa subversion //检查是否安装了低版本的SVN yum remove subversion //如果存储旧版本,卸载旧版本SVN 开始安装 yum -y ins ...

  2. HDU - 4135 Co-prime 容斥定理

    题意:给定区间和n,求区间中与n互素的数的个数, . 思路:利用容斥定理求得先求得区间与n互素的数的个数,设表示区间中与n互素的数的个数, 那么区间中与n互素的数的个数等于.详细分析见求指定区间内与n ...

  3. React Native填坑之旅 -- 回归小插曲

    回归RN,非常开心啊! 在React Native 0.49.5上开发,直接遇到一个ios模拟器的问题.这个问题很简单就是Bundle URL not present. 在网上找了很多的解决方法,都不 ...

  4. Bootloader Project

    Bootloader Project From OMAPpedia Jump to: navigation, search Contents [hide] 1 OMAP Bootloader Over ...

  5. Ubuntu 卸载cario-dock

    偶然间听说别人用dock 可以把ubuntu美化,结果就装了个cairo-dock .结果是苹果mac的风格.不是很喜欢.于是就卸载,卸载过程中.发行卸载不掉. 尝试了很多方法. sudo apt-g ...

  6. dojo省份地市级联之省份封装类（一）

    省份封装类 Province.java /** * 省份封装类 */ package com.you.model; import java.io.Serializable; /** * @author ...

  7. DirectShow学习笔记总结

    DirectShow是微软公司在ActiveMovie和Video for Windows的基础上推出的新一代基于COM(Component Object Model)的流媒体处理的开发包,9.0之前 ...

  8. pat1091-1100

    1091bfs傻逼题,dfs会爆栈 #include<iostream> #include<cstdio> #include<cstring> #include&l ...

  9. Struts2(七) Struts2访问Servlet的API

    当接受表单参数,向页面保持数据时.要用到Struts访问Servlet 的API .下面只做参考,有错误或不同意见可以发送邮箱2440867831@qq.com  .建议大家看struts文档,源代码 ...

  10. CSS3动画以及animation事件

    1.CSS3动画以及animation事件的定义 animation :name duration timing-function delay iteration-count direction an ...