如何用纯JavaScript替代jQuery实现多输入框keyup事件绑定？

需求回顾 #

为所有带有data-pattern='comma'属性的<input>元素绑定keyup事件，触发自定义函数inputComma，在用户输入时将输入框值格式化为逗号分隔的格式。

你的写法问题排查 #

你尝试的两种写法语法本身没有错误，大概率是inputComma函数内部的逻辑没有适配纯JS环境导致的。比如原jQuery版本的inputComma可能依赖$(this)获取当前元素，而你转成纯JS时没有对应调整函数内部的元素引用方式。

正确实现方案 #

方案1：利用事件处理函数的this指向（最简洁）

普通函数作为事件处理函数时，this会自动指向触发事件的<input>元素，和jQuery中$(this)指向的元素一致，直接绑定函数即可：

// 绑定事件
document.querySelectorAll("input[data-pattern='comma']").forEach(elem => {
    elem.addEventListener('keyup', inputComma);
});

// 适配纯JS的inputComma函数
function inputComma() {
    // 这里的this就是当前触发keyup的input元素
    const rawValue = this.value.replace(/,/g, ''); // 先移除已有的逗号
    // 格式化数字为逗号分隔格式
    const formattedValue = rawValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
    this.value = formattedValue;
}

方案2：显式传递元素参数（兼容原函数参数逻辑）

如果你的inputComma函数原本设计为接收元素参数，那你的写法只需要确保函数内部正确使用传入的参数即可：

// 接收元素参数的inputComma函数
function inputComma(elem) {
    const rawValue = elem.value.replace(/,/g, '');
    const formattedValue = rawValue.replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
    elem.value = formattedValue;
}

// 绑定事件（你的第一种写法调整后即可用）
document.querySelectorAll("input[data-pattern='comma']").forEach(elem => {
    elem.addEventListener('keyup', function() {
        inputComma(elem);
    });
});

方案3：使用箭头函数+事件对象（灵活获取元素）

也可以通过事件对象的target属性获取当前元素，箭头函数不影响这里的取值：

document.querySelectorAll("input[data-pattern='comma']").forEach(elem => {
    elem.addEventListener('keyup', (e) => {
        inputComma(e.target);
    });
});

// inputComma函数同方案2，接收元素参数
function inputComma(elem) {
    // 格式化逻辑...
}

关键说明 #

• 箭头函数作为事件处理函数时，this不会指向触发事件的元素，但你通过elem变量或者e.target获取元素的方式是完全可行的；
• 原jQuery的$(this)可以直接替换为纯JS的this（方案1）或者传入的元素参数（方案2/3）；
• 注意格式化时先移除已有逗号，避免重复添加。

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