首页 / JAVASCRIPT / JavaScript仿支付宝6位数字密码输入框

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript仿支付宝6位数字密码输入框，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6697字，纯文字阅读大概需要10分钟。

内容图文

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

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

结构层：

<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位数字密码输入框 - 文章图片

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

内容总结

以上是互联网集市为您收集整理的JavaScript仿支付宝6位数字密码输入框全部内容，希望文章能够帮你解决JavaScript仿支付宝6位数字密码输入框所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/347331.html

来源：【匿名】

【上一篇】Javascript Function.prototype.bind详细分析【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript仿支付宝6位数字密码输入框】教程文章相关的互联网学习教程文章

用户找回密码功能JS验证邮箱通过点击下一步隐藏邮箱输入框并修改下一步按钮的ID【代码】

//这里是BaseDao 1/** 2 * 获得一个对象3 * @param hql4 * @param param5 * @return 6*/ 7public Object get(String hql, Object[] param){8 List<Object> objects = this.getHibernateTemplate().find(hql, param); 9if (objects != null && objects.size() > 0) { 10return objects.get(0); 11 } else { 12returnnull; 13 } 14 }//这里是UsersDaoImpl 1/** 2 * 查找邮箱...

js动态设置输入框字体/颜色【代码】

动态设置文本框颜色：主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type="text/javascript"> <!-- function myFocus(obj,color){ //判断文本框中的内容是否是默认内容 if(obj.value=="请输入收件人地址"){ obj.value=""; } //设置文本框获取焦点时候背景颜色变换 obj.style.backgroundColor=color; } function myblur(obj,color){ //当鼠标离开时候改变文本框背景颜色 obj.sty...

页面JS实现按钮点击增加输入框【代码】【图】

最近开发实现了那种点击增加按钮就会多出一栏的效果，但是当每栏的输入框的数量比较多的时候，后台参数的接受就是个问题，不过现在问题总算解决了，用List集合去接受页面数组的方式，具体实现如下：　　实现的思路：　　首先，要把传递的每栏参数变成每个对象，例如：昵称，用户名，密码就是一个user类的属性；@Entity publicclass User {@Id@GenericGenerator(name = "generator", strategy = "increment")@GeneratedValue(genera...

JavaScript建立一个语法高亮输入框实现思路【图】

textarea元素已被广泛用于网页Web的IDE。通常网站自带的textarea编辑器不能满足我们的需求，作为一名开发者我们经常需要进行代码的在线编辑，高亮显示代码等，因此，通过其他的开源项目，我们可以添加一些实用的功能，在这篇文章中，我将使用JavaScript库ACE来创建一个输入框效果。这是一个完全开源的脚本。该脚本允许开发人员创建支持语法高亮的输入框。然后你可以代码嵌入到网站中的任何地方下载库首先我们需要Github上下载AC...

js输入框字数实时更新的实例教程【图】

这篇文章主要介绍了JavaScript输入框字数实时统计更新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下在前端开发中，很多情况下需对输入内容进行验证。实时统计功能，对于定长输入而言，可以让用户实时明确输入界限，并合理安排内容。字数实时统计更新下面将以【消息内容】为例，设计实现输入框字数实时统计更新功能。项目架构如下：message message.css message.js message.tpl 1. 在message.tpl文件中定义网页元...

JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

js中输出信息的方法内容如下所示： 1、文档流输出 document.write(hello);2、输出信息提示框模态对话框 window.alert(要输出显示的内容'); 或 alert('要输出显示的内容'); alert(n);3、信息确认框 var f = window.confirm(是否要进入新浪网); confirm(""); if(f){ location.href = http://www.sina.com.cn; }4、提示输入框 window.prompt var n = window.prompt(请输入年龄,18); if(n>=18){ document.write(欢迎你年轻人); }5、...

js简单实现表单中点击按钮动态增加输入框数量的方法【图】

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法。分享给大家供大家参考。具体如下：这里演示表单中点击按钮动态增加输入框数量的方法，默认是没有输入框，点击按钮之后，输入框会不断的增加，每点击一次，增加一个，觉得挺不错吧，希望对你有所帮助。运行效果如下图所示：在线演示地址如下： http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//D...

javascript-UEditor编辑器输入框不能输入是怎么回事【图】

鼠标点击白色的没反应回复内容：鼠标点击白色的没反应随便插入一张图或者表情等，然后点进去看看有没有反应？ueditor的工具栏是可以浮动的，有可能是你页面滚动到了最底部，工具栏已经浮动了，遮挡住了ueditor中闪动的光标

javascript-如何获取输入框中输入的url链接【图】

通过php如何怎么达到如下效果在下图链接框中输入地址，提交点击下图“查看”，可以打开上述输入的地址小白，求代码示例回复内容：通过php如何怎么达到如下效果在下图链接框中输入地址，提交点击下图“查看”，可以打开上述输入的地址小白，求代码示例就把输入的链接保存然后展示第二个页面的把查看的链接地址指向上一步保存的那个链接图一：填写的表单已提交到后台入库，库中相应的有了这个链接的记录图二：属于从后台...

javascript-如何实现输入框提示功能？

给定一个输入框，一个搜索点击按钮，当输入框获得焦点时提示用户最近搜索内容，如何实现，有哪些方法。从哪些方面测试以保障其健壮性。回复内容：给定一个输入框，一个搜索点击按钮，当输入框获得焦点时提示用户最近搜索内容，如何实现，有哪些方法。从哪些方面测试以保障其健壮性。说说思路。建立一个隐藏的ul列表，待选项在列表里面。把曾经的输入内容以数组的形式存储在localstorage内。设置待选列表数组的最大长度，先进后出。...

javascript-下拉框和输入框的结合，输入的时候带查询...【图】

描述：下拉框和输入框的结合，输入的时候可以根据输入的内容，去数据库查询，数据库查询到的数据形成下拉框展示，有不错的思路或者链接求推荐!回复内容：描述：下拉框和输入框的结合，输入的时候可以根据输入的内容，去数据库查询，数据库查询到的数据形成下拉框展示，有不错的思路或者链接求推荐!input自动填充-Autocomplete http://blog.csdn.net/linlinv3/article/details/38516661

javascript-HTML提交表单后,输入框还有字,是怎么做到的?

就是这个提交后,会空的;我会用 php echo ''; 这个我就是感觉比较二,项目中,都是怎么做的?说说原理就行哈!回复内容：就是这个提交后,会空的;我会用 php echo ''; 这个我就是感觉比较二,项目中,都是怎么做的?说说原理就行哈!Ajax的话，在回调里重新赋值就行；非ajax的话，记cookie或session存cookies让js调，或者存session，每次都展示最近一次的提交记录前后端分离，就是前端用ajax调用就不会刷新啊采用ajax异步提交就不会刷新界...

vue移动端实现ip输入框问题的解决方法介绍

本篇文章给大家带来的内容是关于Python动态定义函数的方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。vue框架移动端做ip输入框组件，input在浏览器和微信端兼容问题。要求：只能输入数字，输入数字以外的字符（包括点、冒号等数字符号）时自动跳到下一段ip输入框.type=number类型，不会禁止点的输入。手动过滤拿不到包括点字符的字符串.而且输入多个点之后，拿到的值为空.解决办法：type=tel,只能输入数...

如何强制让输入框的文本以大写显示？（代码示例）【图】

本篇文章给大家带来的内容是介绍强制让输入框的文本以大写显示的方法？（代码示例），让大家掌握多种强制转换大写的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。有的时候，在一个表单里，你只想接受某些输入或textarea字段中的大写字母文本。那么如何让输入的小写字母强制转换为大写字母文本？从JavaScript到CSS和服务器端代码，其实有有很多方法可以解决这个烦人的问题。下面我们就通过简单的代码示例...

输入框只能输入负数,整数,2位小数(键盘弹起事件)

html代码 <input type="text" onkeyup="clearNoNum(this)">js代码 function clearNoNum(obj) {var str,num,arr,len,bool; obj.style.imeMode =disabled //禁止输入法obj.value = obj.value.replace("-", "$#$").replace(/\-/g, "").replace("$#$","-");obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$",".");arr = obj.value.substring(0,1);num = /^[0-9]*$/.test(arr);len = obj.value.substrin...

首页 / JAVASCRIPT / JavaScript仿支付宝6位数字密码输入框

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript仿支付宝6位数字密码输入框】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

支付宝 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程