基于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 相关文章推荐
innerText和textContent对比及使用介绍
Feb 27 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
javascript实现列表切换效果
May 02 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
微信小程序实现自定义底部导航
Nov 18 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 mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
调试php程序的简单步骤
2019/10/04 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
Javascript 二维数组
2009/11/26 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
移动端js图片查看器
2016/11/17 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
python自定义解析简单xml格式文件的方法
2015/05/11 Python
Python中类型检查的详细介绍
2017/02/13 Python
简单了解django文件下载方式
2020/02/10 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
妇女儿童发展规划实施方案
2014/03/16 职场文书
食品安全演讲稿
2014/09/01 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
贷款担保书
2015/01/20 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android