How to call javascript function when value in textarea was change?

Question

How to call javascript function when value in textarea was change ?

When fill data into textarea id="yyyy", textarea id="xxxx" will change value too. This function are work good.

When textarea id="xxxx" change value, i want to call function check2 , how can i do ?

please do not change code in function check and id="yyyy"

<textarea id="yyyy" onkeyup="check(this.value)"></textarea>
<textarea id="xxxx" onchange="check2(this.value)" ></textarea>

<script>
function check(value){
    document.getElementById("xxxx").value = value;
}
function check2(value){
    alert(value);
}
</script>

Possible duplicate of [How can I bind to the change event of a textarea in jQuery?](http://stackoverflow.com/questions/11338592/how-can-i-bind-to-the-change-event-of-a-textarea-in-jquery) — Alex Young, Dec 06 '16 at 16:10
looks like the fiddle is working, not sure what youre looking for — Pabs123, Dec 06 '16 at 16:10
Pabs123 - when fill data into textarea `id="yyyy"` then textarea `id="xxxx"` will change too. ok ? and then i want to call function `check2` — weduti sepoyuei, Dec 06 '16 at 16:14

thekodester · Answer 1 · 2017-03-16T12:15:40.143

The standard events for <textarea> are keypress, keydown, or keyup. To do what you want you'll have to trigger the onchange in one of the functions. This makes most sense inside the first function called check.

document.getElementById("textarea2").addEventListener("change", function(event) {
  console.log("Textarea two was changed.");
});

function check(element) {
  var textarea2 = document.getElementById("textarea2"),
    event = new Event('change');
  textarea2.value = element.value;
  textarea2.dispatchEvent(event);
};

<textarea id="textarea1" onkeyup="check(this);"></textarea>
<textarea id="textarea2" onkeyup="check(this);"></textarea>

Why does the second `textarea` changes when typing in the first? — BarryCap, Jun 08 '21 at 08:56

l.hussain · Answer 2 · 2016-12-06T16:23:01.633

1

Updated fiddle : https://jsfiddle.net/9b6h897d/6/

When you change the value in check call the check2 method like :

function check(value){
     document.getElementById("xxxx").value = value;
     check2(value).
}

i think it's better to use oninput if you want to track the user changes.

if you don't want to change the content of check() you have to call the both function in the oninput :

<textarea id="yyyy" oninput="check(this.value);check2(this.value)"></textarea>

New fiddle : https://jsfiddle.net/9b6h897d/9/

Hope this will help you.

edited Dec 06 '16 at 16:23

answered Dec 06 '16 at 16:17

l.hussain

462
3
11

and please do not edit code in `id="yyyy"` too T__T cause code in function `check` and `id="yyyy"` are out of my control T__T – weduti sepoyuei Dec 06 '16 at 16:32
Impossible to do that without changing those two elements else you've to attach new event. – l.hussain Dec 06 '16 at 16:35

John C · Answer 3 · 2016-12-06T16:33:57.763

Create just one function that both use, within the function check to see what textarea called the function and then write your separate code for each.

This is just sudo code that I'm writing off my phone, so it may have minor errors you need to fix.

var userEdit = true;

function(ta) {
  if (ta.Id == 'xxx')
  {
     // Do code for xxx text area
     userEdit = false;
     // update yyy via code
     userEdit = true;
  } else if (ta.Id == 'yyy' && userEdit) {
    // Do code for yyy text area change only when a user edits it
  } else if (ta.Id == 'yyy' && !userEdit) {
    // Do code for yyy text area change only when your code edits it
  }
}

You could also use onblur instead of onchange, onblur gets called when a user changes the focus out of a object. Like after they type in a input and then tab or click into another input or button it will get fired.

How to call javascript function when value in textarea was change?

3 Answers3