用原生JavaScript造轮子（2）——密码框

最新推荐文章于 2023-02-05 20:54:52 发布

Crazy_Oranges

最新推荐文章于 2023-02-05 20:54:52 发布

阅读量307

点赞数

分类专栏：前端学习原生javascript 原生造轮子文章标签：密码框 JS密码框原生javascript

本文链接：https://blog.youkuaiyun.com/Crazy_Oranges/article/details/82194555

版权

前端学习同时被 3 个专栏收录

17 篇文章

订阅专栏

原生javascript

10 篇文章

订阅专栏

原生造轮子

2 篇文章

订阅专栏

博客介绍了类似支付宝/微信支付时的密码输入框，需判断只能输入数字，从第一位开始输入，输入字母不显示，输入完成光标后移，删除从最后一位开始。给出了具体效果，适用于手机端，还包含html、css和js代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果用于手机端最佳，样式可修改。

html代码：

<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>

css样式：

<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>

js代码：

<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>