JS实现支付密码输入框常用支付效果

作者：鹏仔先生日期：2020-06-02 10:11:12浏览：2016分类：JavaScript

最近上班做项目，需要用到一个类似支付宝/微信支付时候的密码输入框，这种输入框需要判断很多，只能输入数字，并且从第一位输入，如果输入字母会不显示（也就是没输入，为空，直到输入数字才可以），第一位输入完成之后光标进入第二位，以此类推，并且删除又要从输入的最后一位开始删除，不能指定某个位置来进行删除...具体效果如上方，大家可利用下方代码来查看...

本次代码特别感谢温柔、善良、可爱、漂亮的小姐姐“小母”的帮助，下方是完整代码，大家可自行使用。

效果用于手机端最佳，样式大家自行修改。

<style type="text/css">  
   .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;
	}
	.showValue{
		width: 240px;
		height: 22px;
		line-height: 22px;
		font-size: 16px;
		text-align: center;
		margin: 0 auto;
	}
</style>

<body>
	<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>
		<!-- 显示输入的密码 -->
		<p class="showValue" id="showValue"></p>
	</div>
</body>

<script>
	(function(){
		var container = document.getElementById("inputBoxContainer");
		boxInput = {
			maxLength:"",
			realInput:"",
			bogusInput:"",
			bogusInputArr:"",
			callback:"",
			init:function(fun){
					//this指的是对象boxInput
					var that = this;
					this.callback = fun;
					that.realInput = container.children[0];
					//大input框
					that.bogusInput = container.children[1];
					//六个小input框
					that.bogusInputArr = that.bogusInput.children;
					//得到第一个小Input框的maxlength的值
					that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");

					//当在大Input里输入值时执行的函数
					that.realInput.oninput = function(){
						that.setValue();
					}
					//oninput的兼容写法
					that.realInput.onpropertychange = function(){
						that.setValue();
					}
			},
			setValue:function(){

				// \D：意思是匹配一个非数字字符。当在大Inputk框里输入的是非数字字符时，用空字符串代替，即不显示
				this.realInput.value = this.realInput.value.replace(/\D/g,"");

				//获取大Input框的值
				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();
	});

	function getValue(){
		document.getElementById("showValue").innerText = boxInput.getBoxInputValue();
	}
</script>