js仿支付宝多方框输入支付密码效果


Posted in Javascript onSeptember 27, 2016

上次看到别人说写一个类似支付宝支付密码的输入框效果,今天就想自己写了试试看,大体功能是实现了。

已实现部分:
1. 焦点会随着输入数值往后推移
2. 如果输入的非0-9,则会出现提示
3. 按Backspance回车可以对应格子焦点往前推移
4. 按回车或者点击按钮可以触发按钮点击事件,获得输入值

未完善部分:
1. 在控制输入类型的时候,只有0-9、非0-9以及回车、回删几个键盘事件的区分,不够完善
2. 输入框用的input标签,password类型,会将输入值变成圆点,但是圆点太小不够美观,不知道如何改变圆点大小,考虑是否要画个圆点遮盖

ps:代码不够精简,很多感觉还可以改进精简。

效果图:

js仿支付宝多方框输入支付密码效果

代码段:

**index.html 主要代码**

<div class="content">
 <div class="title">支付宝支付密码:</div>
 <div class="box"></div>
 <div class="forget">忘记密码?</div>
 <div class="point">请输入6位数字密码</div>
 <button class="getPasswordBtn">一键获取密码</button>
 <div class="errorPoint">请输入数字!</div>

</div>

**reset.css代码**

*{
 padding: 0;
 margin: 0;
}
.content{
 width: 400px;
 height: 50px;
 margin: 0 auto;
 margin-top: 100px;

}
.title{
 font-family: '微软雅黑';
 font-size: 16px;
}
.box{
 width: 190px;
 height: 30px;
 border:1px solid #ccc;
 margin-top: 10px;
 line-height: 30px;
}
.content .box,.forget{
 display: inline-block;
}
.content .forget{
 width: 100px;
 color:lightskyblue;
 vertical-align: super;
 font-size: 14px;
}
.box input.paw{
 width: 30px;
 height: 20px;
 line-height: 20px;
 margin-left: -9px;
 border:none;
 border-right: 1px dashed #ccc;
 text-align: center;
}
.box input.paw:nth-child(1){
 margin-left: 0;
}
.content .box .pawDiv:nth-child(6) input.paw{
 border: none;
}
.content .box input.paw:focus{outline:0;}
.content .box .pawDiv{
 display: inline-block;
 line-height: 30px;
 width: 31px;
 height: 31px;
 margin-top: -2px;
 float: left;
}
.point{
 font-size: 14px;
 color: #ccc;
 margin: 5px 0;
}
.errorPoint{
 color: red;
 display: none;
}
.getPasswordBtn{
 width: 100px;
 height: 30px;
 background-color: cornflowerblue;
 font-size: 14px;
 font-family: '微软雅黑';
 color: white;
 border: none;
}

**main.js代码**

/*动态生成*/
var box=document.getElementsByClassName("box")[0];
function createDIV(num){
 for(var i=0;i<num;i++){
  var pawDiv=document.createElement("div");
  pawDiv.className="pawDiv";
  box.appendChild(pawDiv);
  var paw=document.createElement("input");
  paw.type="password";
  paw.className="paw";
  paw.maxLength="1";
  paw.readOnly="readonly";
  pawDiv.appendChild(paw);
 }
}
createDIV(6);



var pawDiv=document.getElementsByClassName("pawDiv");
var paw=document.getElementsByClassName("paw");
var pawDivCount=pawDiv.length;
/*设置第一个输入框默认选中*/
pawDiv[0].setAttribute("style","border: 2px solid deepskyblue;");
paw[0].readOnly=false;
paw[0].focus();

var errorPoint=document.getElementsByClassName("errorPoint")[0];
/*绑定pawDiv点击事件*/

function func(){
 for(var i=0;i<pawDivCount;i++){
  pawDiv[i].addEventListener("click",function(){
   pawDivClick(this);
  });
  paw[i].onkeyup=function(event){
   console.log(event.keyCode);
   if(event.keyCode>=48&&event.keyCode<=57){
    /*输入0-9*/
    changeDiv();
    errorPoint.style.display="none";

   }else if(event.keyCode=="8") {
    /*退格回删事件*/
    firstDiv();

   }else if(event.keyCode=="13"){
    /*回车事件*/
    getPassword();

   }else{
    /*输入非0-9*/
    errorPoint.style.display="block";
    this.value="";
   }

  };
 }

}
func();


/*定义pawDiv点击事件*/
var pawDivClick=function(e){
 for(var i=0;i<pawDivCount;i++){
  pawDiv[i].setAttribute("style","border:none");
 }
 e.setAttribute("style","border: 2px solid deepskyblue;");
};


/*定义自动选中下一个输入框事件*/
var changeDiv=function(){
 for(var i=0;i<pawDivCount;i++){
  if(paw[i].value.length=="1"){
   /*处理当前输入框*/
   paw[i].blur();

   /*处理上一个输入框*/
   paw[i+1].focus();
   paw[i+1].readOnly=false;
   pawDivClick(pawDiv[i+1]);
  }
 }
};

/*回删时选中上一个输入框事件*/
var firstDiv=function(){
 for(var i=0;i<pawDivCount;i++){
  console.log(i);
  if(paw[i].value.length=="0"){
   /*处理当前输入框*/
   console.log(i);
   paw[i].blur();

   /*处理上一个输入框*/
   paw[i-1].focus();
   paw[i-1].readOnly=false;
   paw[i-1].value="";
   pawDivClick(pawDiv[i-1]);
   break;
  }
 }
};



/*获取输入密码*/
var getPassword=function(){
 var n="";
 for(var i=0;i<pawDivCount;i++){
  n+=paw[i].value;
 }
 alert(n);
};
var getPasswordBtn=document.getElementsByClassName("getPasswordBtn")[0];

getPasswordBtn.addEventListener("click",getPassword);

/*键盘事件*/
document.onkeyup=function(event){
 if(event.keyCode=="13") {
  /*回车事件*/
  getPassword();
 }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
JS跨域代码片段
Aug 30 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
jQuery实现右键菜单、遮罩等效果代码
Sep 27 #Javascript
jQuery实现图片轮播效果代码
Sep 27 #Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 #Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 #Javascript
js转html实体的方法
Sep 27 #Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 #Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
PHP实现简易图形计算器
2020/08/28 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
7个JS基础知识总结
2014/03/05 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
javascript 实现map集合
2015/04/03 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python语言元素知识点详解
2019/05/15 Python
python 通过可变参数计算n个数的乘积方法
2019/06/13 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
专科毕业生求职简历的自我评价
2013/10/12 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
Python Matplotlib绘制动画的代码详解
2022/05/30 Python