在用户键入时更改输入表单中的字符串

Question

我想将输入表单中的文本更改为"*"当用户输入时。我已经弄清楚了如何将文本更改为星号，它在控制台显示为星号，但我无法在用户打字时更改文本。下面是我的代码:

const cardNumber = document.getElementById("input");
const reg = new RegExp("^[0-9]*$");
cardNumber.addEventListener("keyup", function changeChar(){
if(cardNumber.value.length <= 12){
for(i=0; i<cardNumber.value.length; i++){
const newValue = cardNumber.value[i].replace(reg, "*");//Replaces the number with an asterisk
console.log(newValue);//Outputs as asterisks on the console
cardNumber.value[i].innerHTML = newValue;//This doesn't seem to do the trick
}
}
});

我试着用。value和。innerhtml方法改变文本的值，但没有成功。我希望文本在用户输入时变为星号。

Answer 1

你把事情弄得太复杂了。

获取输入的长度，然后创建一个具有相同长度的*字符串，并将其赋值给输入值。

cardNumber.addEventListener("keyup", function changeChar() {
const asterisks = "************";
if (cardNumber.value.length <= asterisks.length) {
let newNumber = asterisks.substring(0, cardNumber.value.length);
cardNumber.value = newNumber;
}
});

<input id="cardNumber">