展示效果地址：https://1963331542.github.io/inputPassword/
源代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>input密碼框顯示為星號“*”</title>
</head>
<body>
<input type="text" />
當前輸入值為:<span></span>
</body>
</html>
<script>
var str = ""; //str變量用於存儲密碼
//獲取input元素
var input = document.getElementsByTagName("input")[0];
//獲取span元素
var span = document.getElementsByTagName("span")[0];
input.oninput = function(evt) {
var val = this.value; //取到輸入框的值
if (val.length > str.length) {
//輸入值
str += val.charAt(val.length - 1);
} else {
//回刪值
str = str.substr(0, val.length);
}
//將輸入框除最后一位的字符替換成*
this.value =
val.substr(0, val.length - 1).replace(/./g, "*") +
val.charAt(val.length - 1);
/* 取當前輸入框長度，用於判斷是否正在輸入
停止輸入時，一秒后將最后一個字符變成*號 */
var len = this.value.length;
setTimeout(() => {
/*這時的this指向在延遲器觸發時輸入框的狀態，
而不是延遲器創建時的狀態*/
if (this.value.length == len) {
//一秒后輸入框的值長度不變，將所有字符替換為*
this.value = this.value.replace(/./g, "*");
}
}, 1000);
span.innerHTML = str;
};
</script>
覺得不錯的話推薦一下哦