基于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中的delete介绍
Sep 02 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
详解webpack打包vue时提取css
May 26 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
JS获取本地地址及天气的方法实例小结
May 10 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
用Flash图形化数据(一)
2006/10/09 PHP
PHP 常见郁闷问题答解
2006/11/25 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python连接DB2数据库
2016/08/27 Python
Python生成密码库功能示例
2017/05/23 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python如何将字符串转换为日期
2020/07/31 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
小区门卫值班制度
2014/01/24 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
英语课外活动总结
2014/08/27 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android