detect if the textarea value is set programmetically-CodePudding

My website receives some text through API call and that value is displayed on textarea on the page. I want to run a function to perform some tasks after the value is set to textarea. But I don't see any event triggering when setting textarea value through program. I cannot find any related questions, solutions or articles regarding this.

Below is the demonstration of the problem I am facing.

txt.onchange = () => {
  alert("textarea changed (onchange event)");
}

txt.onkeyup = () => {
  alert("textarea changed (onkeyup event)");
}

txt.onkeydown = () => {
  alert("textarea changed (onkeydown event)");
}

txt.oninput = () => {
  alert("textarea changed (oninput event)");
}

changetxt.onclick = () => {
  txt.value = "value is set programmetically.";
}

<textarea id="txt" rows="10"></textarea>
<button id="changetxt">Update Textarea</button>

I want some way to detect textarea value is changed through program.

CodePudding user response：

is you js inside a fn that got triggered when the dom is ready? like described here? Vanilla JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

CodePudding user response：

Hey @Bibek Oli

As I'm understanding your question, you want some way to get value of textarea when is change. So, basically in that case, we use onchange event to find change.

You can do like this:-

const input = document.querySelector('input');


input.addEventListener('change', updateValue);

function updateValue(e) {
 console.log(e.target.value);
}