上次看到别人说写一个类似支付宝支付密码的输入框效果,今天就想自己写了试试看,大体功能是实现了。
已实现部分:
1. 焦点会随着输入数值往后推移
2. 如果输入的非0-9,则会出现提示
3. 按Backspance回车可以对应格子焦点往前推移
4. 按回车或者点击按钮可以触发按钮点击事件,获得输入值
未完善部分:
1. 在控制输入类型的时候,只有0-9、非0-9以及回车、回删几个键盘事件的区分,不够完善
2. 输入框用的input标签,password类型,会将输入值变成圆点,但是圆点太小不够美观,不知道如何改变圆点大小,考虑是否要画个圆点遮盖
ps:代码不够精简,很多感觉还可以改进精简。
效果图:
代码段:
**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(); } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- 李泉.1995-上海梦【魔岩】【WAV+CUE】
- 何雨雯.1994-给你的歌【天王唱片】【WAV+CUE】
- 群星.1994-神摇第一章·极乐扬州路【D.I.Y】【WAV+CUE】
- 《车烧友 发烧情歌天碟3CD》[WAV/分轨][1.9GB]
- 《薛之谦 情歌不变招牌 霸气情歌2CD》[WAV/分轨][1.2GB]
- 《刘若英 滚石SACD精选》[ISO][1GB]
- 仙境传说新启航牧师怎么加点 牧师属性技能加点推荐
- 仙境传说新启航舞娘怎么加点 舞娘属性技能加点推荐
- 魔兽世界祖尔格拉布在哪 魔兽世界祖尔格拉布位置介绍
- 群星《名列前茅五大顶级发烧男声》2CD[DTS-WAV]
- 群星《经典再现·国语女声》2CD[DTS-WAV]
- 群星《十大民歌天后》2CD[DTS-WAV分轨]
- 《黑神话:悟空》浮屠牢是最糟糕的部分:但也是做得最好的
- 《艾诺提亚:失落之歌》PC版反向跳票!9月17日PC开玩
- 老外谈《黑神话:悟空》:在我心里10分 但它确实是8分游戏