How to detect if textarea content has changed with 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

first -> second is okay but second -> third is not work

because The change event is fired for input, select, and textarea elements when a change to the element's value is committed by the user. (MDN)

how can detect change of second textarea after change of first textarea?

i want pass first to second, second to third (not first -> third)

Ron Vaknin · Accepted Answer · 2020-12-06 01:43:27Z

3

If you want to change the third textarea input after each input from the second one, the same way the first one works, try this:

<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 event:

This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on elements. source

edit:

if the you need to detect a change that JS triggered and not the user, might be the best way to just add event dispatch

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

I did not find any way to fire an event from textarea on change that was not from the user himself except triggering it manually

edited Dec 6, 2020 at 1:43

answered Dec 4, 2020 at 19:12

Ron Vaknin

666 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

dmgpgdmgpg Over a year ago

not work..... becuase input event is by 'user'. but 'second.value = first.value' is not by user.... if i typing text on second textarea, it will work... but that's not what I want to do

Ron Vaknin Over a year ago

So I misunderstood the question, wouldn't it be easier to just change second and third the same way? or you specifically want to change the third textarea on any change on the second one?

dmgpgdmgpg Over a year ago

sorry to late. I want 'monitor' if second textarea value is change. The change includes both changes by users and changes by JS.

dmgpgdmgpg Over a year ago

I am making a multi-translator project. The first textarea detects input (language A) and requests the text from the api to receive the translated text (language B).

dmgpgdmgpg Over a year ago

Put the translated text into the second textarea and the second textarea should detect it.

|

Collectives™ on Stack Overflow

How to detect if textarea content has changed with JavaScript

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related