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)
如何在第一个文本区域更改后检测第二个文本区域的更改？
我想从第一传递到第二，第二到第三(不是第一 -> 第三)
最佳答案
如果您想在第二个文本区域输入后更改第三个文本区域输入，与第一个文本区域的工作方式相同，请尝试以下操作:
<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>
oninput 事件:
该事件与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;
});
除了手动触发之外，我没有找到任何方法在非用户本人的更改时从文本区域触发事件
关于javascript - 如何使用 JavaScript 检测文本区域内容是否已更改，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65149255/