JavaScript修改word_count字段值未触发change事件监听器问题问询

问题原因 #

通过JavaScript直接修改输入框的value属性时，浏览器不会自动触发change事件，这是浏览器的标准设计：change事件仅在用户手动交互修改输入框内容、且输入框失去焦点时才会触发，代码层面的赋值操作不属于用户交互，所以不会触发监听。

解决方案 #

方案1：手动派发change事件（推荐，无需改动原有监听逻辑） #

在给word_count赋值之后，主动创建并触发change事件即可。

方案2：公共函数抽离 #

把word_count的change监听逻辑单独封装成函数，在更新字数之后直接调用该函数，无需依赖事件触发。

另外原代码使用keypress监听输入存在缺陷：无法捕获退格、剪切、粘贴等操作，建议替换为input事件，同时可保留change事件处理失焦时的字数校准。

修改后的完整代码 #

// 抽离字数统计逻辑，避免重复代码
function updateWordCount() {
    const subjectEl = document.getElementById('subject');
    let string = subjectEl.value.replace(/\s+/g, " ");
    // 处理空内容时字数为0的边界问题
    const words = string.trim() ? string.split(/\s+/).length : 0;
    const wordCountEl = document.getElementById('word_count');
    wordCountEl.value = words;
    
    // 手动触发change事件
    wordCountEl.dispatchEvent(new Event('change'));
}

// 用input替代keypress，覆盖所有输入场景
document.getElementById('subject').addEventListener('input', updateWordCount);
// 保留change事件，处理失焦时的校准
document.getElementById('subject').addEventListener('change', updateWordCount);

document.getElementById('word_count').addEventListener('change', function() {
    alert('change fired');
}, false);

<form>
   <div> 
     <label for="subject">string:</label>
     <textarea id="subject" name="subject"></textarea>
   </div>
   <div>
     <label for="word_count">count:</label>
     <input id="word_count">
   </div>
</form>

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