如何在用户输入时将输入框内容替换为星号（*）？

你的代码核心问题出在字符串不可变性、输入框内容修改方式错误以及事件选择不合适这几点上，直接修改单个字符或者用innerHTML操作输入框都是无效的，下面直接给你修正后的方案：

核心问题拆解 #

1. JS里字符串是不可变的，没法通过cardNumber.value[i]直接修改单个字符，必须重新赋值整个value。
2. 输入框的内容是通过.value属性控制的，.innerHTML是用来修改元素的HTML结构，对输入框完全没用。
3. keyup事件触发时机滞后，用户按住按键输入时会有延迟，改用input事件能实时响应输入变化。
4. 你的正则表达式用错了，^[0-9]*$是匹配整个字符串是否全为数字，用来替换单个字符不会生效。

修正后的代码（保留真实输入值+实时显示星号） #

如果需要后续获取用户实际输入的内容，必须用一个变量存真实值，不然只显示星号的话会丢失输入数据：

const cardNumber = document.getElementById("input");
let realValue = ''; // 专门存用户真实输入的内容

cardNumber.addEventListener("input", function(event) {
    // 处理输入操作
    if (event.data) {
        // 只允许输入数字，且最多12位
        if (/^\d$/.test(event.data) && realValue.length < 12) {
            realValue += event.data;
            // 输入框显示对应长度的星号
            cardNumber.value = '*'.repeat(realValue.length);
        }
    }
    // 处理删除操作（退格/删除键）
    else if (event.inputType.includes('delete')) {
        realValue = realValue.slice(0, -1);
        cardNumber.value = '*'.repeat(realValue.length);
    }
});

简化版（不限制输入类型，所有内容转星号） #

如果不需要限制只能输入数字，只是把所有输入内容都换成星号，可以用这个版本：

const cardNumber = document.getElementById("input");
let realValue = '';

cardNumber.addEventListener("input", function(event) {
    if (event.data && realValue.length < 12) {
        realValue += event.data;
        cardNumber.value = '*'.repeat(realValue.length);
    } else if (event.inputType.includes('delete')) {
        realValue = realValue.slice(0, -1);
        cardNumber.value = '*'.repeat(realValue.length);
    }
});

内容的提问来源于stack exchange，提问作者Chimamanda16