How can I detect when a textarea value changes using javascript?

Question

Fill data into id="yyyy" then data id="xxxx" will change too, how can I alert when value in id="xxxx" change?

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

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

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

score 1 · Accepted Answer · edited Dec 15 '16 at 16:58

You could redefine the value property of the textarea element:

<html>
    <head>
        <script>
            //Is not changable according to OP
            function check(value){
                document.getElementById('xxxx').value = value
            };

            //Is not changable according to OP
            function check2(value){
                alert(value)
            };

            window.onload = function(){
                var tE = document.querySelector('#xxxx'); //The readonly textarea

                //Redefine the value property for the textarea
                tE._value = tE.value;
                Object.defineProperty(tE, 'value', {
                    get: function(){return this._value},
                    set: function(v){
                        console.log(this.id, ' - the value changed to: ' + v)
                        this._value = v;
                        this.setAttribute('value', v) //Setting the attribute (browser stuff);
                        check2(v)
                    }
                })
            }
        </script>
    </head>

    <body>
        <textarea id = 'yyyy' onkeyup = 'check(this.value)'></textarea>
        <textarea id = 'xxxx' onchange = 'check2(this.value)' readonly></textarea>
    </body>
</html>

console.log(): https://jsfiddle.net/mu7o1sxq/

alert(): https://jsfiddle.net/mu7o1sxq/2/

@weduti sepoyuei: It is in the console. Does a man prefer an alert()? — Lain, Dec 07 '16 at 08:17
@weduti sepoyuei: A man has JavaScript 'onLoad'. Put it to 'No wrap - in ' by clicking on the blue 'JAVASCRIPT *' label. — Lain, Dec 07 '16 at 09:24

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

you can call function inside of other function

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

jsfiddle

try this fiddle...

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 07 '16 at 07:49

nisar

1,055
2
11
26

function check are out of my control T___T – weduti sepoyuei Dec 07 '16 at 07:50

madalinivascu · Answer 3 · 2016-12-07T07:56:38.867

0

Call the second function in the first not on a change event

Try this:

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

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

or trigger the onchange event

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

or add another event to your xxx

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

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

edited Dec 07 '16 at 07:56

answered Dec 07 '16 at 07:50

madalinivascu

32,064
4
39
55

function `check` and `id="yyyy"` out of my control T_T – weduti sepoyuei Dec 07 '16 at 07:51
get some men and control them :)) – madalinivascu Dec 07 '16 at 07:54
what do you mean by that? – madalinivascu Dec 07 '16 at 07:54
i can not edit function check and id="yyyy" cause it's from api. – weduti sepoyuei Dec 07 '16 at 07:56
you have a api of function, that's something new to me can you provide some example of this kind of api? – madalinivascu Dec 07 '16 at 07:57

ScanQR · Answer 4 · 2016-12-07T08:26:05.530

0

You dont need to update value in check() instead call check2() and update the value. So remove onchange event from id=xxxx

EDIT : Override the keyup as follows and call the inaccessible function from that event handler

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

<script>
  function check(value) {
    //your unaccessible function
  }

  document.getElementById("yyyy").addEventListener('keyup', function() {
    document.getElementById("xxxx").value = this.value;
    alert(this.value);
    check(this.value)
  });
</script>

edited Dec 07 '16 at 08:26

answered Dec 07 '16 at 07:53

ScanQR

3,740
1
13
30

function `check` and `id="yyyy"` out of my control T_T – weduti sepoyuei Dec 07 '16 at 07:56
@wedutisepoyuei then you have to override the keyup as you have limitations. Please try updated answer. – ScanQR Dec 07 '16 at 08:26

guest271314 · Answer 5 · 2016-12-07T08:23:48.103

You can use MutationObserver with configuration set to attributes:true, set #xxxx .dataset to .value of #yyyy at check function

<textarea id="yyyy" onkeyup="check(this.value); document.getElementById('xxxx').dataset.value = this.value">
</textarea>
<textarea id="xxxx" data-value="" readonly></textarea>

<script>

  var x = document.getElementById("xxxx");

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

  function check2(value) {
    alert(value);
  }

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(check2.bind(x, x.value))
  });

  observer.observe(x, {
    attributes: true
  });

</script>

How can I detect when a textarea value changes using javascript?

5 Answers5

Linked