首页
所有分类
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中，为什么要尽可能使用局部变量？
Apr 06 Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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
Excel(4) 抽象类(1) 接口(1) 正则表达式(3) 信息校验(1) 静态压缩(1) 乱码(3) 分区(2) 驱动模型(1) 自动播放(1)
You might like
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
Pytorch to(device)用法
2020/01/08 Python
sklearn+python:线性回归案例
2020/02/24 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
YesBabyOnline美国：全球性的在线婚纱礼服工厂
2018/05/05 全球购物
prAna官网：瑜伽、旅行和冒险服装
2019/03/10 全球购物
大学生年度自我鉴定
2013/10/31 职场文书
大学生简单自荐信
2013/11/10 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
红头文件任命书范本
2014/06/05 职场文书
安全生产会议制度
2015/08/06 职场文书
初级职称评定工作总结
2015/08/13 职场文书
学习委员竞选稿
2015/11/20 职场文书
Vue如何清空对象
2022/03/03 Vue.js
什么是Python装饰器？如何定义和使用？
2022/04/11 Python