检测更改，如果输入文本被 JavaScript 更改答案

【问题标题】：Detect change, if input-text is changed by JavaScript检测更改，如果输入文本被 JavaScript 更改
【发布时间】：2019-05-16 01:12:59
【问题描述】：

总结-我正在开发一个文本比较工具。我有两个功能 - 一个 excel 解析器，它从 excel 文件中获取数据并以动态/编程方式更改输入文本。
- 文本比较函数侦听输入字段中的任何更改并运行文本比较逻辑。

我是 jQuery 新手，但我尝试过 JS 与 eventListeners、oninput、onchange、onpaste 等。注意：下面的代码 sn -p 说明了这种情况。但是，没有这样的按钮单击。

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

function assignValue() {
  a.value = "Hello World";
}
a.addEventListener('input', recInput);

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

<input id="test">
<button onclick="assignValue()">Click to add text</button>

有没有什么方法可以使用 JS 来捕捉变化？如果没有，我愿意使用 jQuery。

【问题讨论】：

标签： javascript input event-handling onchange

【解决方案1】：

您可以使用MutationObserver API 来执行此操作。

注册一个回调函数来处理变化的属性。

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>

您需要使用 setAttribute() 并且需要设置 Input 元素的 value 属性以使其与属性保持同步。（如changeIt() 函数所示。

【讨论】：

感谢@Randy，该解决方案还适用于注册到同一个回调函数的多个观察者！

【解决方案2】：

您可以为此使用onkeydown。

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

a.addEventListener('onkeydown', recInput);

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

【讨论】：

OP 想要捕获对HTMLInputElement 的编程更改，而不是键盘输入。这没有回答问题。