本文实现的是一个类似支付宝支付密码的界面,只可以输入数字,且只可以输入6位
首先给大家展示下效果图,如果感觉不错,请参考实现代码。
1、样式表
.wrap{ margin: 10px auto; width: 329px; height: 640px; padding-top: 200px; } .inputBoxContainer{ width: 240px; height: 50px; margin: 0 auto; position: relative; } .inputBoxContainer .bogusInput{ width: 100%; height: 100%; border: #c3c3c3 1px solid; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; overflow: hidden; position: absolute; z-index: 0; } .inputBoxContainer .realInput{ width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: 1; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; } .inputBoxContainer .bogusInput input{ padding: 0; width: 16.3%; height: 100%; float:left; background: #ffffff; text-align: center; font-size: 20px; border: none; border-right: #C3C3C3 1px solid; } .inputBoxContainer .bogusInput input:last-child{ border: none; } .confirmButton{ width: 240px; height: 45px; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; background: #f4f4f4; border: #d5d5d5 1px solid; display: block; font-size: 16px; margin: 30px auto; margin-bottom: 20px; } .showValue{ width: 240px; height: 22px; line-height: 22px; font-size: 16px; text-align: center; margin: 0 auto; }
2、HTML代码
<div class="wrap"> <div class="inputBoxContainer" id="inputBoxContainer"> <input type="text" class="realInput"/> <div class="bogusInput"> <input type="password" maxlength="6" disabled/> <input type="password" maxlength="6" disabled/> <input type="password" maxlength="6" disabled/> <input type="password" maxlength="6" disabled/> <input type="password" maxlength="6" disabled/> <input type="password" maxlength="6" disabled/> </div> </div> <button id="confirmButton" class="confirmButton">查看</button> <p class="showValue" id="showValue"></p> </div>
3、js代码控制逻辑效果
(function(){ var container = document.getElementById("inputBoxContainer"); boxInput = { maxLength:"", realInput:"", bogusInput:"", bogusInputArr:"", callback:"", init:function(fun){ var that = this; this.callback = fun; that.realInput = container.children[0]; that.bogusInput = container.children[1]; that.bogusInputArr = that.bogusInput.children; that.maxLength = that.bogusInputArr[0].getAttribute("maxlength"); that.realInput.oninput = function(){ that.setValue(); } that.realInput.onpropertychange = function(){ that.setValue(); } }, setValue:function(){ this.realInput.value = this.realInput.value.replace(/\D/g,""); console.log(this.realInput.value.replace(/\D/g,"")) var real_str = this.realInput.value; for(var i = 0 ; i < this.maxLength ; i++){ this.bogusInputArr[i].value = real_str[i]""; } if(real_str.length >= this.maxLength){ this.realInput.value = real_str.substring(0,6); this.callback(); } }, getBoxInputValue:function(){ var realValue = ""; for(var i in this.bogusInputArr){ if(!this.bogusInputArr[i].value){ break; } realValue += this.bogusInputArr[i].value; } return realValue; } } })() boxInput.init(function(){ getValue(); }); document.getElementById("confirmButton").onclick = function(){ getValue(); } function getValue(){ document.getElementById("showValue").innerText = boxInput.getBoxInputValue(); }
以上所述是小编给大家介绍的基于JS实现类似支付宝支付密码输入框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
标签:
js支付宝密码输入框
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“基于JS实现类似支付宝支付密码输入框”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年05月09日
2024年05月09日
- 《依盖之书》基础攻略 简述+配置+下载
- 发烧精选(雅瑟音响试音碟)VA-《UsherAudioDemonstation》CD1【ELAC】
- 发烧精选(雅瑟音响试音碟)VA-《UsherAudioDemonstation》CD2【ELAC】
- SYMPHONIESINHI-FI1(发烧交响乐1)MQGCD2020原抓WAV
- 玩家称《剑星》服装致敬杀死比尔 网友:明明是李小龙
- 索尼取消强绑PSN账号 玩家热议:污点已无法抹去
- 《死亡搁浅》玛玛演员玛格丽特·库里新片剧照 造型美艳至极
- 农夫.2023-农夫散文集【乐腾】【FLAC分轨】
- 黄格选.1993-伤心事一种说不出的痛【先科娱乐】【WAV+CUE】
- 群星.1993-宝丽金美少女宣言6CD【宝丽金】【WAV+CUE】
- 大生意隐藏任务哪里接?大生意任务攻略
- 周深《晚安明天见 TMElive超现场》[WAV/分轨][700MB]
- 群星 再次征服挑剔的耳朵《发烧天籁女声 5CD》[WAV+CUE][3.3GB]
- 费玉清《一剪梅 HQCD 不朽的经典》[WAV+CUE][670MB]
- 西游笔绘西行新手攻略 新手入门指南分享