JavaScript
发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了基于JS实现类似支付宝支付密码输入框，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实现的是一个类似支付宝支付密码的界面，只可以输入数字，且只可以输入6位
首先给大家展示下效果图，如果感觉不错，请参考实现代码。
1、样式表
{
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代码
