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>

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

Javascript 相关文章推荐
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
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
You might like
php入门教程 精简版
2009/12/13 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
动态加载js和css(外部文件)
2013/04/17 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vscode vue 文件模板的配置方法
2019/07/23 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python3.6数独问题的解决
2019/01/21 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
python requests指定出口ip的例子
2019/07/25 Python
Python threading的使用方法解析
2019/08/28 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
TobyDeals美国:在电子产品上获得最好的优惠和折扣
2019/08/11 全球购物
老师推荐信
2013/10/28 职场文书
公司市场部岗位职责
2013/12/02 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
高一家长会邀请函
2014/01/12 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014会计年终工作总结
2014/12/20 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL