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 相关文章推荐
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
Apr 30 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 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
PHP4中session登录页面的应用
2008/07/25 PHP
让PHP以ROOT权限执行系统命令的方法
2011/02/10 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
用于table内容排序
2006/07/21 Javascript
pjblog修改技巧汇总
2007/03/12 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
django框架实现一次性上传多个文件功能示例【批量上传】
2019/06/19 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
村干部培训方案
2014/05/02 职场文书
中央空调节能方案
2014/06/15 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
公路施工安全责任书
2015/05/08 职场文书
销售合作意向书范本
2015/05/08 职场文书
工商行政处罚决定书
2015/06/24 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
java调用Restful接口的三种方法
2021/08/23 Java/Android
python使用BeautifulSoup 解析HTML
2022/04/24 Python