<!DOCTYPE html>

<html>

<head>  

<script src="scripts/jquery-1.7.1.min.js"></script>

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

<style>

.pwd-box{

        width:310px;

        padding-left: 1px;

        position: relative;

        border: 1px solid #9f9fa0;

        border-radius: 3px;

overflow:hidden

    }

    .pwd-box input[type="tel"]{

        width: 99%;

        height: 45px;

        color: transparent;

        position: absolute;

        top: 0;

        left: 0;

        border: none;

        font-size: 18px;

        opacity: 0;

        z-index: 1;

        letter-spacing: 35px;

    }

    .fake-box input{

        width: 44px;

        height: 48px;

        border: none;

        border-right: 1px solid #e5e5e5;

        text-align: center;

        font-size: 30px;

    }

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

        border:none;

    }

</style>

</head>

<body>

<div class="pwd-box">

    <input type="tel" maxlength="6" class="pwd-input" >

    <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>

$(function(){

    var $input = $(".fake-box input");

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

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

                for (var i = 0, len = pwd.length; i < len; i++) {

                    $input.eq("" + i + "").val(pwd[i]);

                }

                $input.each(function() {

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

                    if (index >= len) {

                        $(this).val("");

                    }

                });

                if (len == 6) {

                    //执行其他操作

                }

            });

})

</script>

</body>

</html>

jquery 移动端 六位密码输入的更多相关文章

  1. jQuery移动端手机键盘输入车牌号代码【附加新能源车牌】

    最近在移动应用中要做到一个录取汽车牌号码的功能,在网上找了一个插件后发现没有增加新能源车牌功能, 和同事研究了一下,将其进行改造完美的实现了这个功能,这里放出该插件的源码: 原插件来自A5源码网[ht ...

  2. wex5 实战 微信6位数字密码输入设计

    微信支付使用是6位数字输入,用wex5能不能制作这种效果呢? 答案是肯定的. 根据网上提供的数字插件,研究源码后,与wex5进行整后修改,便于利用wex5框架优势. 一 效果演示: 弹出密码框 输入 ...

  3. MySQL程序端启动密码错误解决方法

    MySQL程序端启动密码错误解决方法 一般启动MySQL程序端,都是用mysql -uroot -p命令,当然前提是你的环境变量已经配好了. 为了连接服务器,当调用mysql时,通常需要提供一个MyS ...

  4. EditTextPreference点击后输入框显示隐藏内容，类似密码输入(转)

    http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     aski ...

  5. Android 高仿微信支付密码输入控件

    像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思 ...

  6. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  7. Demon_游戏登录界面（具备账号密码输入功能）

    using UnityEngine; using System.Collections; using UnityEngine.UI;// public class LoginButton : Mono ...

  8. JQuery 限制文本框只能输入数字和小数点

    $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).v ...

  9. 实现免密码输入 ssh 登录

    实现免密码输入 ssh 登录假设 A 为客户机器, B 为目标机:要达到的目的:A 机器 ssh 登录 B 机器无需输入密码:加密方式选 rsa|dsa 均可以,默认 dsa做法:1.登录 A 机器2 ...

随机推荐

  1. XMU 1617 刘备闯三国之汉中之战 【BFS+染色】

    1617: 刘备闯三国之汉中之战 Time Limit: 1000 MS  Memory Limit: 128 MBSubmit: 6  Solved: 5[Submit][Status][Web B ...

  2. 表单提交数据量大于2m，java 后台接受不到表单传递过来的数据

    一般来说 post请求提交的数据无大小限制,但是tomcat 设置默认的表单传输数据大小不能2m,这时候当数据大于2m后台接收达不到表单的数据,需要修改tomcat的server.xml的的maxPo ...

  3. HDU1281 棋盘游戏 —— 二分图最大匹配 + 枚举

    题目链接:https://vjudge.net/problem/HDU-1281 棋盘游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit ...

  4. usdt源码编译安装

    1.依赖关系Boost >= 1.53 2.安装依赖包You will need appropriate libraries to run Omni Core on Unix, please s ...

  5. 《Visual C++ 2010入门教程》系列六：VC2010常见调试技术

    <Visual C++ 2010入门教程>系列六:VC2010常见调试技术   犹豫了好久,最终还是决定开始这一章,因为我不清楚到底有没有必要写这样的一章,是应该在这里说明一些简单的调试方 ...

  6. POJ - 1422 Air Raid（DAG的最小路径覆盖数）

    1.一个有向无环图(DAG),M个点,K条有向边,求DAG的最小路径覆盖数 2.DAG的最小路径覆盖数=DAG图中的节点数-相应二分图中的最大匹配数 3. /* 顶点编号从0开始的 邻接矩阵(匈牙利算 ...

  7. poj 2396 Budget【有上下界的网络流】

    第一步:建立无源汇有上下界的网络模型 每行 i 作为一个点并连边(s, i, Ri, Ri),每列 j 作为一个点并连边(j, t, Cj, Cj),设 Uij, Lij 分别表示第 i 行第 j 列 ...

  8. 洛谷P4331 [BOI2004]Sequence 数字序列（左偏树）

    传送门 感觉……不是很看得懂题解在说什么? 我们先把原数列$a_i-=i$,那么本来要求递增序列,现在只需要求一个非严格递增的就行了(可以看做最后每个$b_i+=i$,那么非严格递增会变为递增) 如果 ...

  9. css实现侧边展开收起

    前言:因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition. 详情 内容1 内容1 内容1 内容1 内容1 右侧有实现demo.就是那个绿色的详情 先来看一下我的代码 ...

  10. layui配置

    layui是一个全局变量,可以在任何地方访问到 layui.config 方法主配置信息(经测试好像不能添加额外属性) layui.setter读取主配置属性 layui.extend 方法增加主配置 ...