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?
/
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>
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/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>
5 Answers
Reset to default 1You 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/mu7o1sxq/
alert(): https://jsfiddle/mu7o1sxq/2/
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...
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>
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>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>