首页
所有分类
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 相关文章推荐
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
详解微信小程序（Taro）手动埋点和自动埋点的实现
Mar 02 Javascript
微信小程序实现轮播图指示器
Jun 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
MX500(1) S2000(3) YB235(1) 直流胆(1) YB217(1) 南麂列岛(1) YB400(2) 森海(1) PL660(1) 台湾(1)
You might like
PHP两种快速排序算法实例
2015/02/15 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
页面只有一个text的时候，回车自动submit的解决方法
2010/08/12 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
layui树形菜单动态遍历的例子
2019/09/23 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
python持久性管理pickle模块详细介绍
2015/02/18 Python
Python入门教程之if语句的用法
2015/05/14 Python
浅析Python编写函数装饰器
2016/03/18 Python
微信跳一跳游戏python脚本
2020/04/01 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
详解python中list的使用
2019/03/15 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python性能测试工具locust的使用
2020/12/28 Python
保护环境倡议书500字
2014/05/19 职场文书
学术会议领导致辞
2015/07/29 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS