首页
所有分类
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 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
JS中的作用域链
Mar 01 Javascript
js实现三级联动效果（简单易懂）
Mar 27 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
vue中axios的二次封装实例讲解
Oct 14 Javascript
原生js实现购物车
Sep 23 Javascript
使用JS实现简易计算器
Jun 14 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
DBLink(1) ctypes(1) 间隙锁(2) innoDB(3) MVCC(4) 事务并发(1) C/C++(1) 复读(1) 经纬度(1) 幻读(5)
You might like
基于mysql的bbs设计（五）
2006/10/09 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
js的写法基础分析
2011/01/17 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
jquery foreach使用示例
2013/09/12 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Numpy之random函数使用学习
2019/01/29 Python
Anaconda＋vscode＋pytorch环境搭建过程详解
2020/05/25 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
如何使用PHP session
2015/04/21 面试题
对祖国的寄语大全
2014/04/11 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
《海上日出》教学反思
2016/02/23 职场文书