如何使用 JavaScript 检测文本区域内容是否已更改
html
<!DOCTYPE html>
<html>
<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 元素触发 Change 事件。（MDN）
如何在第一个文本区域更改后检测第二个文本区域的更改？
我想从第一传递到第二，第二到第三（不是第一 -> 第三）
大话西游6661回答
-
偶然的你
如果您想在第二个文本区域输入后更改第三个文本区域输入，与第一个文本区域的工作方式相同，请尝试以下操作：<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 事件也适用于元素。编辑：如果您需要检测 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;});除了手动触发之外，我没有找到任何方法可以在非用户本人的更改时从文本区域触发事件
随时随地看视频慕课网APP
相关分类
JavaScript