jQuery实现6位数字密码输入框_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-10 22:12:20 点击率：次

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

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

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

　　啰嗦半天了，直接上代码：

结构层：

<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端兼容问题，所以加了点正则。

本身没有什么复杂的东西，我就不多啰嗦了，需要注意的地方都加注释了。

附上完整代码：

<!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 # 密码 # 输入框 # jQuery Easyui 验证两次密码输入是否相等 # jquery.cookie.js 操作cookie实现记住密码功能的实现代码 # JQuery记住用户名和密码的具体实现 # 基于JQuery的密码强度验证代码 # jquery判断输入密码两次是否相等 # 使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能（含后台代码） # IE下支持文本框和密码框placeholder效果的JQuery插件分享 # JQuery记住用户名密码实现下次自动登录功能 # jquery 实现密码框的显示与隐藏示例代码 # jquery 手势密码插件 # 我就 # 请在 # 将有 # 先将 # 清空 # 的是 # 就会 # 有个 # 都在 # 那么多 # 不多 # 较高 # 没有什么 # 半天 # 我用 # 用了 # 弹出 # 写了 # 这篇

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：ZLibrary书签怎么导出 ZLibrary收藏夹备份【指

下一篇：讯港云建站方案与SEO优化指南：一站式解决自适应模板难题

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：ZLibrary书签怎么导出 ZLibrary收藏夹备份【指

下一篇：讯港云建站方案与SEO优化指南：一站式解决自适应模板难题