JavaScript使用键盘监听事件实现把password类型输入框默认字符●修改成*

之前看了网上的文章使用各种方法都不好用，自己用js做了一个简易的实现。这个方法的原理是用css重叠两个输入框，并且不显示上面那个，当用户聚焦到上面输入框时，改变下面输入框样式，并记录用户键盘输入内容，为数字时底部输入框的值拼接一个字符串*。为退格时移除最后一个字符串*

css

/* 两个输入框外的盒子 */
.inp-box {
	position: relative;
}

#password,
#password_show {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

/* 上面的输入框完全透明 */
#password {
	z-index: 10;
	opacity: 0;
}

/* input被聚焦时的样式 */
.inp-focus {
	padding-block: 1px;
	padding-inline: 2px;
	margin: 0em;
	padding: 1px 0px;
	border-width: 2px;
	border-style: inset;
	border-color: light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
	border-image: initial;
}

html和script

<div class="inp-box"> <!-- 相对定位 -->
	<input type="text" name="" id="password"> <!-- 绝对定位方式使两输入框重合 -->
	<input type="text" name="" id="password_show">
</div>
		
		
<script>
	var pwdEL = document.querySelector( '#password' )
	var pwd1 =""
	pwdEL.onkeydown = function keydown(event) {
			console.log(event)
			console.log("按键按下" + event.key)
			if(!isNaN(Number(event.key))){ // 如是数字
				password_show.value += "*" // 表面显示一星号
				pwd1 += event.key // 底层变量值跟着变
			}else if(event.key == "Backspace"){ // 如是退格 表面和内部字符串均去除最后一位
				password_show.value = password_show.value.slice(0, -1)
				pwd1 = pwd1.slice(0, -1)
			}
	}
			
	pwdEL.onfocus = function(){
		console.log("聚焦")
		password_show.className = "inp-focus"
	}
	pwdEL.onblur = function(){
		console.log("失焦")
		password_show.className = ""
	}			
</script>