Textarea Onchange Detection

Textarea onchange detection

You will need to use onkeyup and onchange for this. The onchange will prevent context-menu pasting, and the onkeyup will fire for every keystroke.

See my answer on How to impose maxlength on textArea for a code sample.

How to detect if textarea content has changed with JavaScript

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

How to detect (programmatic) changes to textarea?

I eventually found an answer to this here: Textarea onchange detection

Using

<textarea oninput="myfunc(this)"  onpropertychange="myfunc(this)">

solved it for me, and this is supposed to work for IE8 as well.

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

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/

Detection of textarea value change

When you change the value of an input programmatically no event is raised by default. If you need this behaviour you need to fire the event yourself, eg:

$('#foo').val('bar').trigger('change');

How to detect a textbox's content has changed

Start observing 'input' event instead of 'change'.

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

...which is nice and clean, but may be extended further to:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

onChange textarea detection and clear input field

The problem is the function name clear. This function already exists in the browser, it's used to clear the console window (it probably should have been called console.clear(), but it's a top-level function). So your onchange is calling that function instead.

Give your function a different name (I used clearfield()) and it will work.

function clearfield()   {       document.getElementById('clearme').value= " " ;        }

<input type="text" id="clearme" value="123" readonly><textarea type="text" id="test2" onChange="clearfield()">some
text
here</textarea>

Textarea Onchange Detection