基于JS实现类似支付宝支付密码输入框


Posted in Javascript onSeptember 02, 2016

本文实现的是一个类似支付宝支付密码的界面,只可以输入数字,且只可以输入6位

首先给大家展示下效果图,如果感觉不错,请参考实现代码。

基于JS实现类似支付宝支付密码输入框

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]?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实现类似支付宝支付密码输入框,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 #Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 #Javascript
AngularJs  Understanding Angular Templates
Sep 02 #Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 #Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 #Javascript
AngularJs  E2E Testing 详解
Sep 02 #Javascript
解决node.js安装包失败的几种方法
Sep 02 #Javascript
You might like
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
python读取LMDB中图像的方法
2018/07/02 Python
pandas计数 value_counts()的使用
2019/06/24 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
寄语十八大感言
2014/02/07 职场文书
《学会合作》教学反思
2014/04/12 职场文书
合作协议书怎么写
2014/04/18 职场文书
酒店节能降耗方案
2014/05/08 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
水电工程师岗位职责
2015/02/13 职场文书
超市督导岗位职责
2015/04/10 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python