首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript仿支付宝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仿支付宝6位数字密码输入框

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

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

- Author -

webNick

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
dess中一个简单的多路委托的实现
Jul 20 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
vue计算属性及使用详解
Apr 02 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
vue实现列表的添加点击
Dec 29 #Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 #Javascript
基于javascript的Form表单验证
Dec 29 #Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 #Javascript
bootstrap导航条实现代码
Dec 28 #Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 #Javascript
bootstrap导航、选项卡实现代码
Dec 28 #Javascript
seata(1) Dijkstra(1) 三角函数(1) Flask Web(1) Android Studio(4) 迪杰斯特拉(1) MyBatis(5) exec(1) cv2(1) nacos(1)
You might like
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
WordPress网站性能优化指南
2015/11/18 PHP
JavaScript 组件之旅（三）：用 Ant 构建组件
2009/10/28 Javascript
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
Node.js assert断言原理与用法分析
2019/01/04 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
Python 基础教程之str和repr的详解
2017/08/20 Python
Python-for循环的内部机制
2020/06/12 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
Foot Locker澳洲官网：美国运动服和鞋类零售商
2019/10/11 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
售后专员岗位职责
2013/12/08 职场文书
农村婚礼主持词
2014/03/13 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
AJAX实现省市县三级联动效果
2021/10/16 Javascript