时间戳

首页 > 解决方案 > 如何检测 textarea 内容是否已随 JavaScript 更改

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

问题描述

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;
});

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

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

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

如何在第一个 textarea 更改后检测第二个 textarea 的更改？

我想通过第一到第二，第二到第三（不是第一->第三）

标签： javascripthtmlevent-handling

解决方案

如果您想在第二个输入后更改第三个 textarea 输入，与第一个输入相同，请尝试以下操作：

<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;
});

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

推荐阅读