javascript - 如果输入文本被 JavaScript 更改，则检测更改

Question

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

我是 jQuery 新手，但尝试过 JS 的 eventListeners、oninput、onchange、onpaste 等。 注意:以下代码片段解释了这种情况。然而，没有这样的按钮点击。

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。

Answer 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() 函数所示。