首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现6位数字密码输入框

Posted in Javascript onDecember 29, 2016

下个月就要过年了，感觉有点瞎忙。翻了翻博客，感觉这个月都在打酱油啊。借口那么多，其实真的有点懒了，呵呵！

我争取在放假前，将自我总结以及来年计划发出来，把自己打造为勉族，不然真要浑噩度日了。

前几天，项目有个功能和某宝购物支付密码的输入框有点类似，就自己写了这篇博文，权当总结笔记吧。

??掳胩炝耍?苯由洗?耄?/p>

结构层：

<div>
 <div>请在下方输入6位数字</div>
 <div class="ipt-box-nick">
 <input type="tel" maxlength="6" class="ipt-real-nick"/>
 <div class="ipts-box-nick">
 <div class="ipt-fake-box">
 <input type="text" >
 <input type="text" >
 <input type="text" >
 <input type="text" >
 <input type="text" >
 <input type="text" >
 </div>
 </div>
 <div class="ipt-active-nick"><img src="https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"></div>
 </div>
 </div>

 通过结构层，分析下大概思路：

本功能就是一个真实输入框和6个假输入框的故事。

  • 将真实输入框和假输入框容器都定位重叠，注意将真实输入框的优先级设置较高，不然就输入不了咯。
  • 为了做成看似假输入框在输入，则将真实输入框隐藏，用opacity隐藏哦。
  • 用户输入时，通过行为层js将真实输入框的值分配给每个假输入框。
  • 输入的同时，控制假输入框光标的效果，我用了一张某宝的图片做成的，实际上，假输入框是没有获取到焦点的。

注意：

这里真实输入框的type类型用的是tel，而不是number。因为后者会生成小箭头呀，前者在用户点击输入框时app判断type是tel就会弹出数字输入键盘更好。

表现层：

.ipt-box-nick {
 height: 40px !important;
 line-height: 40px !important;
 position: relative !important; }
 .ipt-box-nick .ipt-real-nick {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 width: 100%;
 height: 40px !important;
 line-height: 40px !important;
 opacity: 0 !important;
 z-index: 3 !important; }
 .ipt-box-nick .ipts-box-nick {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 z-index: 1 !important;
 width: 100%;
 height: 40px !important;
 line-height: 40px !important;
 overflow: hidden; }
 .ipt-box-nick .ipts-box-nick .ipt-fake-box {
 height: 40px !important;
 line-height: 40px !important;
 display: flex !important;
 justify-content: space-between !important; }
 .ipt-box-nick .ipts-box-nick .ipt-fake-box input {
 width: 40px !important;
 height: 40px !important;
 border: 1px solid #D7D7D7 !important;
 color: #810213 !important;
 font-weight: bold !important;
 font-size: 18px !important;
 text-align: center !important;
 padding: 0 !important; }
 .ipt-box-nick .ipt-active-nick {
 width: 40px !important;
 height: 40px !important;
 line-height: 40px !important;
 text-align: center;
 position: absolute !important;
 top: 0;
 left: 0;
 z-index: 2; }
 .ipt-box-nick .ipt-active-nick img {
 vertical-align: middle; }

样式里面就一个定位重叠，一个隐藏真实输入框，我就不想多唠叨了。css我用sass写的，转译css有点乱，博友们将就看看吧。

 行为层：

$(".ipt-real-nick").on("input", function() {
 //console.log($(this).val());
 var $input = $(".ipt-fake-box input");
 if(!$(this).val()){//无值光标顶置
 $('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
 }
 if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字
 //console.log($(this).val());
 var pwd = $(this).val().trim();
 for (var i = 0, len = pwd.length; i < len; i++) {
 $input.eq(i).val(pwd[i]);
 if($input.eq(i).next().length){//模拟光标，先将图片容器定位，控制left值而已
 $('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
 }
 }
 $input.each(function() {//将有值的当前input后的所有input清空
 var index = $(this).index();
 if (index >= len) {
 $(this).val("");
 }
 });
 if (len == 6) {
 //执行其他操作
 console.log('输入完整，执行操作');
 }
 }else{//清除val中的非数字，返回纯number的value
 var arr=$(this).val().match(/\d/g);
 $(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
 //console.log($(this).val());
 }
 });

因为tel类型，在pc端兼容问题，所以加了点正则。

本身没有什么复杂的东西，我就不多??铝耍?枰?⒁獾牡胤蕉技幼⑹土恕?/p>

附上完整代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>仿支付宝数字密码输入框</title>
 <style>
 .ipt-box-nick {
 width:300px;
 height: 40px !important;
 line-height: 40px !important;
 position: relative !important; }
 .ipt-box-nick .ipt-real-nick {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 width: 100%;
 height: 40px !important;
 line-height: 40px !important;
 opacity: 0 !important;
 z-index: 3 !important; }
 .ipt-box-nick .ipts-box-nick {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 z-index: 1 !important;
 width: 100%;
 height: 40px !important;
 line-height: 40px !important;
 overflow: hidden; }
 .ipt-box-nick .ipts-box-nick .ipt-fake-box {
 height: 40px !important;
 line-height: 40px !important;
 display: flex !important;
 justify-content: space-between !important; }
 .ipt-box-nick .ipts-box-nick .ipt-fake-box input {
 width: 40px !important;
 height: 38px !important;
 border: 1px solid #D7D7D7 !important;
 color: #810213 !important;
 font-weight: bold !important;
 font-size: 18px !important;
 text-align: center !important;
 padding: 0 !important;
 border-radius:2px;}
 .ipt-box-nick .ipt-active-nick {
 width: 40px !important;
 height: 40px !important;
 line-height: 40px !important;
 text-align: center;
 position: absolute !important;
 top: 0;
 left: 0;
 z-index: 2; }
 .ipt-box-nick .ipt-active-nick img {
 vertical-align: middle; }
 </style>
</head>
<body>
<div>
 <div class="lh40-nick h40-nick fwb-nick">请在下方输入6位数字</div>
 <div class="ipt-box-nick mb15-nick">
 <input type="tel" maxlength="6" class="ipt-real-nick"/>
 <div class="ipts-box-nick">
 <div class="ipt-fake-box">
 <input type="text" >
 <input type="text" >
 <input type="text" >
 <input type="text" >
 <input type="text" >
 <input type="text" >
 </div>
 </div>
 <div class="ipt-active-nick"><img src="https://t.alipayobjects.com/images/rmsweb/T1nYJhXalXXXXXXXXX.gif"></div>
 </div>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
 $(".ipt-real-nick").on("input", function() {
 //console.log($(this).val());
 var $input = $(".ipt-fake-box input");
 if(!$(this).val()){//无值光标顶置
 $('.ipt-active-nick').css('left',$input.eq(0).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
 }
 if(/^[0-9]*$/g.test($(this).val())){//有值只能是数字
 //console.log($(this).val());
 var pwd = $(this).val().trim();
 for (var i = 0, len = pwd.length; i < len; i++) {
 $input.eq(i).val(pwd[i]);
 if($input.eq(i).next().length){//模拟光标，先将图片容器定位，控制left值而已
  $('.ipt-active-nick').css('left',$input.eq(i+1).offset().left-parseInt($('.ipt-box-nick').parent().css('padding-left'))+'px');
 }
 }
 $input.each(function() {//将有值的当前input后的所有input清空
 var index = $(this).index();
 if (index >= len) {
  $(this).val("");
 }
 });
 if (len == 6) {
 //执行其他操作
 console.log('输入完整，执行操作');
 }
 }else{//清除val中的非数字，返回纯number的value
 var arr=$(this).val().match(/\d/g);
 $(this).val($(this).val().slice(0,$(this).val().lastIndexOf(arr[arr.length-1])+1));
 //console.log($(this).val());
 }
 });
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

jQuery实现6位数字密码输入框

- Author -

webNick

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Ajax，UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 #Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 #Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 #Javascript
jQuery实现遮罩层登录对话框
Dec 29 #Javascript
JS实现的简易拖放效果示例
Dec 29 #Javascript
使用DeviceOne实现微信小程序功能
Dec 29 #Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 #Javascript
text-shadow(1) 缓存机制(1) zabbix(9) location(2) 区块链(2) http_stub_status_module(1) 双向链表(6) TypeScript(2) RTMP(1) keeplive_timeout(1)
You might like
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
php对文件夹进行相关操作（遍历、计算大小）
2015/11/04 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jquery延迟加载外部js实现代码
2013/01/11 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
javascript基于HTML5 canvas制作画箭头组件
2014/06/25 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
xmlplus组件设计系列之树（Tree）（9）
2017/05/02 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python友情链接检查方法
2015/07/08 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python web框架 django wsgi原理解析
2019/08/20 Python
生日派对邀请函
2014/01/13 职场文书
合伙经营协议书
2014/04/18 职场文书
学校对教师的评语
2014/04/28 职场文书
六一儿童节标语
2014/10/08 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang