程序博客网 > 阿里云1m宽带网速多少

手机端六位密码输入框

来源：互联网 发布：阿里云1m宽带网速多少 编辑：程序博客网 时间：2024/04/26 07:19
  1. 转载自网名为qiuqingpo的网友
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <script src="http://zeptojs.com/zepto.min.js"></script>  
  6.   <title>手机端六位密码输入</title>  
  7. <style>  
  8. .pwd-box{  
  9.         width:310px;  
  10.         padding-left: 1px;  
  11.         position: relative;  
  12.         border: 1px solid #9f9fa0;  
  13.         border-radius: 3px;  
  14. over-flow:hidden  
  15.     }  
  16.     .pwd-box input[type="tel"]{  
  17.         width: 99%;  
  18.         height: 45px;  
  19.         color: transparent;  
  20.         position: absolute;  
  21.         top: 0;  
  22.         left: 0;  
  23.         border: none;  
  24.         font-size: 18px;  
  25.         opacity: 0;  
  26.         z-index: 1;  
  27.         letter-spacing: 35px;  
  28.     }  
  29.     .fake-box input{  
  30.         width: 44px;  
  31.         height: 48px;  
  32.         border: none;  
  33.         border-right: 1px solid #e5e5e5;  
  34.         text-align: center;  
  35.         font-size: 30px;  
  36.     }  
  37.     .fake-box input:nth-last-child(1){  
  38.         border:none;  
  39.     }  
  40. </style>  
  41. </head>  
  42. <body>  
  43. <div class="pwd-box">  
  44.     <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">  
  45.     <div class="fake-box">  
  46.         <input type="password" readonly="">  
  47.         <input type="password" readonly="">  
  48.         <input type="password" readonly="">  
  49.         <input type="password" readonly="">  
  50.         <input type="password" readonly="">  
  51.         <input type="password" readonly="">  
  52.     </div>  
  53. </div>  
  54. <script>  
  55. var $input = $(".fake-box input");  
  56.             $("#pwd-input").on("input", function() {  
  57.                 var pwd = $(this).val().trim();  
  58.                 for (var i = 0, len = pwd.length; i < len; i++) {  
  59.                     $input.eq("" + i + "").val(pwd[i]);  
  60.                 }  
  61.                 $input.each(function() {  
  62.                     var index = $(this).index();  
  63.                     if (index >= len) {  
  64.                         $(this).val("");  
  65.                     }  
  66.                 });  
  67.                 if (len == 6) {  
  68.                     //执行其他操作  
  69.                 }  
  70.             });  
  71. </script>  
  72. </body>  
  73. </html>  
阅读全文
0 0
阿里云1m宽带网速多少 阿里云1m宽带网速多少
原创粉丝点击
热门IT博客
淘宝店铺可以转让淘宝店铺可以转让
blend4web 乳品厂源码blend4web 乳品厂源码
java软件开发软件下载
百度地图城市数据库
子域名共享session php
韶关网络问政仁化
网络搞笑励志名言
如何下载解压软件
手办制作过程 知乎
bx5u3图文编辑软件
php高端培训
windows怎么打开pages
实现梦想 知乎
淘宝工作计划表
淘宝开直播一天赚多少
wall control软件下载
搜索引擎和大数据
linux idea 安装
中国人工智能行业图谱
邮轮客房知乎
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 夏枯草那五种人不能喝 叶辰和夏若雪五年前全家灭亡 容县夏五共清水口山歌对唱 五月花 成都五月花学校 成都五月花 五月花海 五月花号 五月花社区 五月花号公约 五月花公约 海上五月花 保利海上五月花 合肥保利五月花 五月花学院学费 五月花暖水瓶 五月花技校 五月花广场 五月花激情 www.五月花 五月花网 五月花卫生纸 五月花大酒店 五月花图片 五月花婷婷 五月花丁香 五月花网站 五月花网址 激情五月花 五月花学校 五月花学校学费 五月花专修学校 四川五月花学校 五月花学校在哪里 五月花学校怎么样 团结五月花学校 五月花学校网站 五月花培训学校 五月花酒吧 五月花 学校 五月花中小学校

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里