手机版

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

时间:2021-09-07 来源:互联网 编辑:宝哥软件园 浏览:

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

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

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

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

效果图:

代码段:

**index.html主要代码**

div class=' content ' div class=' title '支付宝支付密码:/div class=' box '/div div class='忘记'忘记密码?/div div class='point '请输入6位数字密码/div button class=' getPasswordBtn '一键获取密码/button div class='errorPoint '请输入数字!/div/div * *重置。钢性铸铁代码**

* { padd : 0;保证金: 0;}.内容{宽度: 400像素高度: 50pxmargin: 0自动边距-top : 100 px;}.标题{ font-family: '微软雅黑;font-size : 16px}.盒子{宽度: 190像素重量: 30像素边界: 1像素固体# cccmargin-top : 10px;线高: 30px}.内容。盒子。忘记{ display : inline-block;}.内容。忘记{ width : 100 pxcolor : lightsky blue垂直对齐:超级;font-size : 14px}.box input . paw { width : 30px three : 20px线高: 20px边距-左侧:-9px;border:none右边框: 1px虚线# ccc文本对齐:中心;}.方框输入。paw : th-child(1){ margin-left : 0;}.内容盒子。paw div : th-child(6)输入。paw { border : none}.内容方框输入。paw :焦点{ outline :0}.内容。盒子pawDiv{ display:内联块;线高: 30px宽度: 31pxheight : 31 pxmargin-top :-2px;向左浮动:}.点{ font-size : 14pxcolor : # cccmargin : 5px 0;}.错误点{ color:红色;显示器:无;}.getPasswordBtn { width : 100 px;高度: 30px背景-颜色:矢车菊蓝;font-size : 14px字体系列: '微软雅黑;颜色:白色;border:无;}**main.js代码**

/*动态生成*/var box=文档。getelementsbyclassname(' box ')[0];函数为{ var(I=0;因纽姆;I){ var paw div=文档。创建元素(' div ');爪子区。类名=' paw div盒子。append child(PawDiv);var paw=文档。创建元素(“输入”);paw . type=' passwordpaw . NAmE=' paw . MaxLength=' 1 paw . ReadOnly=' readonlypaw div。阑尾(爪子);} }创建div(6);var paw div=文档。getelementsbyclassname(' paw div ');var paw=文档。getelementsbyclassname(' paw ');pawDiv.length/*设置第一个输入框默认选中*/pawDiv[0].setAttribute('style ',' border: 2px纯色深蓝’);爪子[0].只读=假爪[0]。焦点();var错误点=文档。getelementsbyclassname('错误点')[0];/*绑定帕夫迪点击事件*/func func(){ for(var I=0;ipawDivCounti ){ pawDiv[i].addEventListener('click '),function(){ pawDivClick(this);});爪子onkeyup=函数(事件){控制台。日志(事件。键码);if(事件。键码=48事件。键码=57){/*输入0-9 */changeDiv();错误点。风格。display=" none}else if(event.keyCode=='8') { /*退格回删事件*/FirstDiv();} else if(事件。键码==' 13 '){/*回车事件*/GetPassport();}else{ /*输入非0-9 */错误点。风格。display=' blockthis.value=} }} } func();/*定义帕夫迪点击事件*/var pawDivClick=函数(e){ for(var I=0;ipawDivCounti ){ pawDiv[i].setAttribute('style ',' border : none ');} e.setAttribute('style ',' border : 2px纯深天蓝色;');};/*定义自动选中下一个输入框事件*/var changeDiv=function(){ for(var I=0;ipawDivCountI){ if(paw[I]。价值。长度==' 1 '){/*处理当前输入框*/paw[i].blur();/*处理上一个输入框*/paw[i 1].焦点();爪子1 .readonly=false paw div click(paw div[I ^ 1]);} }};/*回删时选中上一个输入框事件*/var first div=function(){ for(var I=0;ipawDivCountI){控制台。日志(一);如果。价值。长度==' 0 '){/*处理当前输入框*/控制台。日志(一);爪子模糊();/*处理上一个输入框*/paw[i-1].焦点();爪子[i-1].只读=假爪[i-1]。值=' ';paw div点击(paw div[I-1]);打破;} }};/*获取输入密码*/var getPassword=function(){ var n=' ';for(var I=0;ipawDivCounti ){ n=paw[i].价值;} alert(n);};var getpasswordptn=document。getelementsbyclassname(' getpasswordptn ')[0];getpasswordbtn。addeventlistener(' click ',getPassword);/*键盘事件*/文档。onkey up=function(event){ if(event。键码==' 13 '){/*回车事件*/GetPassport();}};以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

版权声明:js仿支付宝多方框输入支付密码效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。