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? — Alex Young
– Alex Young, Commented Dec 6, 2016 at 16:10
looks like the fiddle is working, not sure what youre looking for — Pabs123
– Pabs123, Commented Dec 6, 2016 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
– weduti sepoyuei, Commented Dec 6, 2016 at 16:14

thekodester · Accepted Answer · 2017-03-16 12:15:40Z

5

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>

edited Mar 16, 2017 at 12:15

answered Dec 6, 2016 at 18:10

thekodester

6664 silver badges16 bronze badges

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

1 Comment

BarryCap Over a year ago

Why does the second textarea changes when typing in the first?

l.hussain · Accepted Answer · 2016-12-06 16:23:01Z

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 6, 2016 at 16:23

answered Dec 6, 2016 at 16:17

l.hussain

4723 silver badges11 bronze badges

2 Comments

weduti sepoyuei Over a year ago

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

l.hussain Over a year ago

Impossible to do that without changing those two elements else you've to attach new event.

John C · Accepted Answer · 2016-12-06 16:33:57Z

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.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related