4

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

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

https://jsfiddle.net/9b6h897d/10/

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>
Improve this question
0

5 Answers 5

Reset to default
1

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/

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

5 Comments

in demo i not get anyrthing T___T
@weduti sepoyuei: It is in the console. Does a man prefer an alert()?
@weduti sepoyuei: Made a second version with alert().
in secend version ,Why i not get data in id="xxxx" ?
@weduti sepoyuei: A man has JavaScript 'onLoad'. Put it to 'No wrap - in <head>' by clicking on the blue 'JAVASCRIPT *' label.
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...

Improve this answer

1 Comment

function check are out of my control T___T
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>
Improve this answer

5 Comments

function check and id="yyyy" out of my control T_T
get some men and control them :))
what do you mean by that?
i can not edit function check and id="yyyy" cause it's from api.
you have a api of function, that's something new to me can you provide some example of this kind of api?
0

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>

Improve this answer

Comments

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>

Improve this answer

2 Comments

function check and id="yyyy" out of my control T_T
@wedutisepoyuei then you have to override the keyup as you have limitations. Please try updated answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.