Detect Change, If Input-text Is Changed By JavaScript

Summary- I am working on a text-comparison tool. I have two functions - an excel-parser, which fetches data from excel file and changes the input-text dynamically/programmatically

Solution 1:

You can use the MutationObserver API to do this.

Register a callback function that will deal with the changing attribute.

const input = document.getElementById('name');
const observer = new MutationObserver(list => {
  console.log("New Value: ", list[0].target.value);
})
observer.observe(input, {
  attributes: true,
  childList: false,
  subtree: false
});

function changeIt() {
  const randomString = Math.random() >= 0.5 ? "one" : "two";
  input.setAttribute("value", randomString);
  input.value = randomString;
}

<input placeholder="Enter some text" name="name" id="name" />
<button onclick='changeIt()'>Push me
</button>

You'll need to use setAttribute() and you'll need to set the Input element's value property to keep it in sync with the attribute. (as seen in the changeIt() function.

Solution 2:

You can use onkeydown for this.

var a = document.getElementById("test");

a.addEventListener('onkeydown', recInput);

function recInput(e) {
  console.log("Sucess!", e.key);
}