JavaScript中input.value移除空白replace方法无效的问题排查

问题根源 #

String.replace()方法不会修改原字符串，它只会生成一个替换后的新字符串返回。你当前的代码只是调用了replace，但没把返回的新字符串重新赋值给inputs[i].value，所以input的内容根本没变化。

修复现有代码 #

把这行：

inputs[i].value.replace(/\s/g, "");

改成：

inputs[i].value = inputs[i].value.replace(/\s/g, "");

这样就能在input失去焦点时，把所有空白字符移除。

更优方案：实时禁止输入空白 #

如果要彻底禁止输入任何空白字符（包括键盘输入、粘贴的内容），更友好的方式是在输入过程中就拦截，而不是等失去焦点再清理。可以结合两种事件实现：

代码示例

const inputs = document.querySelectorAll('input');

window.addEventListener('DOMContentLoaded', () => {
    inputValidation();
})

function inputValidation(){
    for(let i = 0; i < inputs.length; i++) {
        // 阻止键盘输入空格
        inputs[i].addEventListener('keydown', (e) => {
            if (e.key === ' ') {
                e.preventDefault(); // 阻止空格输入
            }
        });

        // 过滤粘贴或其他方式进入的空白内容
        inputs[i].addEventListener('input', () => {
            inputs[i].value = inputs[i].value.replace(/\s/g, "");
        });

        // 保留原有的blur验证逻辑
        inputs[i].addEventListener('blur', () => {
            const errorImg = document.querySelectorAll('.error-img');
            const errorMassage = document.querySelectorAll('.label');
            const emailRegX = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
            const passwordRegX = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
            
            // 这里继续你的验证逻辑
        });
    }
}

这个方案既阻止了用户主动输入空格，又过滤了通过粘贴等方式进入的空白字符，完全实现你要的“禁止输入任何空白字符”的效果。

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