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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
window.ActiveXObject使用说明
Nov 08 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
vue组件与复用详解
Apr 08 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
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
php获取地址栏信息的代码
2008/10/08 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php数组去重复数据示例
2014/02/25 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
利用jQuery解析获取JSON数据
2017/04/08 jQuery
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python传递参数方式小结
2015/04/17 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Pycharm调试程序技巧小结
2020/08/08 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
土木工程个人自荐信范文
2013/11/30 职场文书
怎么写好自荐书
2014/03/02 职场文书
公司合作意向书范文
2014/07/30 职场文书
培训科主任岗位职责
2014/08/08 职场文书
金融保险专业求职信
2014/09/03 职场文书
人工作失职检讨书
2015/05/05 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
八年级物理教学反思
2016/02/19 职场文书
python读取pdf格式文档的实现代码
2021/04/01 Python
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS