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>

js

/*222动态生成*/
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].setAttribute("style","background: red;");
if(i==5){
alert("最后一个22")
getPassword();
return
}
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();
}
};

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,.content .pwdBox{
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;
}

js模拟输入支付密码的更多相关文章

  1. 微信支付开发(3) JS API支付

    由于微信支付接口更新,本文档已过期,请查看新版微信支付教程.地址 http://www.cnblogs.com/txw1958/category/624506.html 本文介绍如何使用JS API支 ...

  2. 移动端键盘密码输入框插件(jquery用于支付密码)

    最后生成样子: 配置值: * back {function} 回调函数 * msghtml {html} 自定义的html * title {string|object} 标题 * {txt:标题,b ...

  3. 微信小程序之支付密码输入demo

    在小程序中实现支付密码的输入,要解决几个问题: 1.小程序要想唤起键盘,必须要借助input控件.通过input控件和其属性focus来唤起和隐藏输入键盘. 2.要让input控件不可见.让光标和输入 ...

  4. 微信支付v2开发(3) JS API支付

    本文介绍如何使用JS API支付接口完成微信支付. 一.JS API支付接口(getBrandWCPayRequest) 微信JS API只能在微信内置浏览器中使用,其他浏览器调用无效.微信提供get ...

  5. 微信支付开发(1) JS API支付

    关键字:微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id 作者:方倍工作室原文: http://www.cnblogs.com/txw1958/p/wxpayv3 ...

  6. Android 高仿微信支付密码输入控件

    像微信支付密码控件,在app中是一个多么司空见惯的功能.最近,项目需要这个功能,于是乎就实现这个功能. 老样子,投篮需要找准角度,变成需要理清思路.对于这个"小而美"的控件,我们思 ...

  7. 微信支付开发(1) JS API支付V3版(转)

    http://www.cnblogs.com/txw1958/p/wxpayv3-jsapi.html 本文介绍微信支付下的jsapi实现流程 前言 微信支付现在分为v2版和v3版,2014年9月10 ...

  8. js中记住密码功能

    js中记住密码功能(在前端实现) 直接上例子(如果你也要实现的话注意改一些变量名称,jsp代码不包含样式) Jsp代码: <form class="am-form tpl-form-l ...

  9. vue支付密码

    从网上搜索了好多都很麻烦,花了点事件自己做了个,简单轻便,老少皆宜 <template> <section class="pay-mask" @click=&qu ...

随机推荐

  1. CAAnimation

    序言 CAAnimation是一个抽象类,遵循了CAMediaTiming协议和CAAction协议!我们不要直接使用CAAnimation类,而是使用其子类: CATransition:提供渐变效果 ...

  2. OpenMediaVault 搭建git,ssh无法连接问题

    /************************************************************************* * OpenMediaVault 搭建git,ss ...

  3. 并不对劲的bzoj4651:loj2086:uoj222:p1712:[NOI2016]区间

    题目大意 有\(n\)(\(n\leq 5*10^5\))个闭区间\([L_1,R_1],[L_2,R_2],...,[L_n,R_n]\)(\(\forall i\in [1,n],0\leq L_ ...

  4. MQTT、CoAP

    实时协议是物联网的一项根本性技术,在物联网领域发挥了重大的作用.目前物联网设备所广泛使用的四大实时协议:XMPP.HTTP.CoAP以及MQTT等可谓各擅所长.亦各有弊端. 那么在万物互联的时代,谁主 ...

  5. 虚拟机C盘扩容

    使用 <分区助手> 下载地址:http://115.com/file/belj8wkm

  6. ubuntu 12.04上安装QQ2013(转载)

    转自:http://www.cnblogs.com/wocn/p/linux_ubuntu_QQ_install.html 环境介绍: OS:Ubuntu12.04 64bit QQ:WineQQ20 ...

  7. P2093 [国家集训队]JZPFAR(KDTree)

    传送门 类似于p4357 不过因为距离相等的时候要优先选择序号小的,所以要重载一下运算符 //minamoto #include<bits/stdc++.h> #define R regi ...

  8. python中threading模块中的Join类

    join类是threading中用于堵塞当前主线程的类,其作用是阻止全部的线程继续运行,直到被调用的线程执行完毕或者超时.具体代码如下: import threading,time def doWai ...

  9. ACM复习专项

    资料整理 ACM训练营 邝斌的ACM模板 牛客网哈理工ACM教学视频 视频网盘资料(密码:kntr) 1. 训练阶段 第一阶段:练习经典常用算法 (本周任务) 1. 最短路(Floyd.Dijstra ...

  10. 状压DP+记忆化搜索 UVA 1252 Twenty Questions

    题目传送门 /* 题意:给出一系列的01字符串,问最少要问几个问题(列)能把它们区分出来 状态DP+记忆化搜索:dp[s1][s2]表示问题集合为s1.答案对错集合为s2时,还要问几次才能区分出来 若 ...