检测变化，如果输入文本被 JavaScript 改变

Question

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

我是 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

您可以使用 onkeydown 来实现。

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

a.addEventListener('onkeydown', recInput);

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

Answer 2

您可以使用 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() 函数所示。

检测变化，如果输入文本被 JavaScript 改变

Detect change, if input-text is changed by JavaScript

javascript

input

onchange

event-handling