如何检测 textarea 内容是否已更改 JavaScript

Question

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <textarea name="" id="a" cols="30" rows="10"></textarea>
    <textarea name="" id="b" cols="30" rows="10"></textarea>
    <textarea name="" id="c" cols="30" rows="10"></textarea>
  </body>
</html>

js

const first = document.getElementById("a");
const second = document.getElementById("b");
const third = document.getElementById("c");

first.addEventListener("input", () => {
  second.value = first.value;
});

second.addEventListener("change", () => {
  console.log("work!!")
  third.value = second.value;
});

codepen -> https://codepen.io/dmgpgdmgpg/pen/NWRxVbg?editors=1111

第一个 -> 第二个没问题但第二 -> 第三行不通

因为当用户 提交对元素值的更改时，会为 input、select 和 textarea 元素触发更改事件。（MDN）

如何检测第一个文本区域变化后第二个文本区域的变化？

我想从第一传到第二，从第二传到第三（不是第一 -> 第三）

Answer 1

如果你想在每次输入第二个文本区域后更改第三个文本区域输入，与第一个文本区域的工作方式相同，试试这个：

<textarea name="" id="a" cols="30" rows="10"></textarea>
<textarea name="" id="b" cols="30" rows="10" oninput="changeText()"></textarea>
<textarea name="" id="c" cols="30" rows="10"></textarea>

输入事件：

这个事件类似于onchange事件。不同之处在于 oninput 事件在元素值更改后立即发生，而 onchange 事件在元素失去焦点时发生，在内容已更改后发生。另一个区别是 onchange 事件也适用于元素。 source

编辑：

如果您需要检测 JS 触发的更改而不是用户触发的更改，最好的方法可能是仅添加事件调度

const first = document.getElementById("a");
const second = document.getElementById("b");
const third = document.getElementById("c");
const event = new Event('input', {
    bubbles: true,
    cancelable: true,
});

first.addEventListener("input", () => {
  second.value = first.value;
  second.dispatchEvent(event);
});


second.addEventListener ('input', () => {
  third.value = second.value;
});

除了手动触发之外，我没有找到任何方法来在不是来自用户本人的更改时从 textarea 触发事件

如何检测 textarea 内容是否已更改 JavaScript

How to detect if textarea content has changed with JavaScript

html

javascript

event-handling