首页
所有分类
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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
jquery 插件学习（五）
Aug 06 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
利用node.js搭建简单web服务器的方法教程
Feb 20 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
Js和VUE实现跑马灯效果
May 25 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
agg(1) 数组(5) 音频(1) 数据处理(2) pandas(7) mp3Play(1) GUI(2) apply(1) 数据保存(1) 矩阵(1)
You might like
PHP快速按行读取CSV大文件的封装类分享（也适用于其它超大文本文件）
2014/04/10 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
JavaScript版代码高亮
2006/06/26 Javascript
js css样式操作代码（批量操作）
2009/10/09 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python基于回溯法子集树模板解决旅行商问题（TSP）实例
2017/09/05 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
Django ORM filter() 的运用详解
2020/05/14 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
IWOOT美国：新奇的小玩意
2018/04/27 全球购物
巴西最好的男鞋：Rafarillo
2018/05/25 全球购物
Bulk Powders意大利：运动补充在线商店
2019/02/09 全球购物
int *p=NULL和*p= NULL有什么区别
2014/10/23 面试题
人力资源管理专业学生自我评价
2013/11/20 职场文书
大学生最常用的自我评价
2013/12/07 职场文书
幼儿园家长评语
2014/02/10 职场文书
抗震救灾标语
2014/06/26 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python