全网整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：400-708-3566

JavaScript仿支付宝6位数字密码输入框

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

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

结构层：

<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>

效果演示：

以上所述是小编给大家介绍的JavaScript仿支付宝6位数字密码输入框，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！


# js  # 支付宝密码输入框  # js仿支付宝密码输入框  # 原生js实现密码输入框值的显示隐藏  # js模拟支付宝密码输入框  # JS中解决谷歌浏览器记住密码输入框颜色改变功能  # 基于JS实现类似支付宝支付密码输入框  # JavaScript实现输入框(密码框)出现提示语  # JavaScript仿支付宝密码输入框  # javascript实现仿银行密码输入框效果的代码  # vue.js实现只能输入数字的输入框  # Vue.js数字输入框组件使用方法详解  # JavaScript实现PC端四格密码输入框功能  # 输入框  # 我就  # 请在  # 将有  # 先将  # 支付宝  # 小编  # 清空  # 的是  # 就会  # 有个  # 在此  # 不多  # 较高  # 没有什么  # 半天  # 我用  # 用了  # 给大家  # 弹出 


相关文章： php8.4新语法match怎么用_php8.4match表达式替代switch【方法】  制作网站的基本流程,设计网站的软件是什么？  ,南京靠谱的征婚网站？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  建站之星代理平台如何选择最佳方案？  网页设计与网站制作内容,怎样注册网站？  枣阳网站制作,阳新火车站打的到仙岛湖多少钱？  如何高效完成独享虚拟主机建站？  宝塔面板如何快速创建新站点？  制作假网页,招聘网的薪资待遇，会有靠谱的吗？一面试又各种折扣？  建站主机是否属于云主机类型？  XML的“混合内容”是什么 怎么用DTD或XSD定义  微课制作网站有哪些,微课网怎么进？  C#如何使用XPathNavigator高效查询XML  西安大型网站制作公司,西安招聘网站最好的是哪个？  网站按钮制作软件,如何实现网页中按钮的自动点击？  广州美橙建站如何快速搭建多端合一网站？  已有域名如何免费搭建网站？  音响网站制作视频教程,隆霸音响官方网站？  如何在万网主机上快速搭建网站？  如何快速打造个性化非模板自助建站？  如何通过主机屋免费建站教程十分钟搭建网站？  北京网站制作公司哪家好一点,北京租房网站有哪些？  宝塔建站助手安装配置与建站模板使用全流程解析  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  网站制作企业,网站的banner和导航栏是指什么？  香港服务器建站指南：外贸独立站搭建与跨境电商配置流程  电商平台网站制作流程,电商网站如何制作？  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  如何在建站之星绑定自定义域名？  较简单的网站制作软件有哪些,手机版网页制作用什么软件？  网站制作免费,什么网站能看正片电影？  如何在Golang中处理模块冲突_解决依赖版本不兼容问题  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  建站主机选虚拟主机还是云服务器更好？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  微网站制作教程,不会写代码，不会编程，怎么样建自己的网站？  昆明高端网站制作公司,昆明公租房申请网上登录入口？  如何制作网站标识牌,动态网站如何制作（教程）？  代刷网站制作软件,别人代刷火车票靠谱吗？  如何在阿里云虚拟主机上快速搭建个人网站？  c# 服务器GC和工作站GC的区别和设置  网站制作公司广州有几家,广州尚艺美发学校网站是多少？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  网站专业制作公司有哪些,做一个公司网站要多少钱？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  建站之星官网登录失败？如何快速解决？  香港服务器租用每月最低只需15元？  头像制作网站在线制作软件,dw网页背景图像怎么设置？  打鱼网站制作软件,波克捕鱼官方号怎么注册？ 

返回目录 在线咨询
上一篇：php下载安装后无法连接mysql怎么办_驱动与权限排查【详解】
下一篇： 卫视网站制作手工教程,手工丝印工艺操作步骤？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

©  云南转妮洋科技有限公司 版权所有   滇ICP备2024034437号 
联系电话： 400-708-3566   E-mail：915688610@qq.com
主营业务：网络营销推广、网站SEO优化、网站定制、营销型网站建设、微商城制作、三级分销系统开发
电话沟通
在线客服