如何为textarea添加文本变更（输入/删除）事件的EventListener？

对于你的需求，最适合的事件是input——它能在textarea的文本实时变化时触发（不管是键盘输入、粘贴、拖拽文本进去都能捕获），比change事件（仅失去焦点时触发）更贴合实时响应的场景。

下面是完整的可运行代码示例：

<textarea id="searchFld" style="resize: none;">Text</textarea>
<!-- 可以加个元素直观看到实时效果 -->
<p>当前输入内容：<span id="output">Text</span></p>

<script>
// 获取目标textarea元素
const searchInput = document.getElementById("searchFld");
// 获取用于显示结果的span元素
const outputSpan = document.getElementById("output");

// 添加文本变化监听
searchInput.addEventListener('input', function() {
  // 这里写你要执行的特定操作，举两个常用例子：
  // 1. 在浏览器控制台打印当前文本内容
  console.log("当前文本：", this.value);
  // 2. 实时更新页面上的显示内容
  outputSpan.textContent = this.value;
});
</script>

关键部分说明： #

• 事件类型选择：'input'是最实用的文本变更监听事件，覆盖所有可能的文本修改场景，新手直接用这个就够。
• 获取DOM元素：document.getElementById("searchFld")通过元素的id精准定位目标textarea，是最基础的DOM选择方法。
• 处理逻辑：匿名函数里的this.value就是当前textarea的文本内容，你可以把示例里的操作替换成自己需要的逻辑（比如触发搜索、校验输入格式等）。

如果需要兼容非常老旧的浏览器（比如IE9及更早版本），可以额外补充propertychange事件的监听，但现在绝大多数场景只用input就足够。

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