基于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判断录入的日期是否合法
Jan 08 Javascript
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
浅析vue数据绑定
Jan 17 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
js数组的基本使用总结
Jan 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数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
php多线程并发实现方法
2016/09/30 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
动态加载js的几种方法
2006/10/23 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
python获取整个网页源码的方法
2020/08/03 Python
Python实现异步IO的示例
2020/11/05 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
广州一家公司的.NET面试题
2016/06/11 面试题
Linux Interview Questions For software testers
2013/05/17 面试题
研究生毕业鉴定
2014/01/29 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书