HTML 如何监听并检测通过 JavaScript 改变的输入值

在本文中，我们将介绍如何监听并检测通过 JavaScript 改变的输入值。

阅读更多：HTML 教程

监听输入值的改变

要监听通过 JavaScript 改变的输入值，我们可以使用addEventListener方法来添加input事件的监听器。这样，无论是用户通过键盘输入还是通过 JavaScript 动态改变输入值，我们都能够捕捉到输入值的改变。

以下是一个示例代码：

<input type="text" id="myInput">

<script>
    const input = document.getElementById("myInput");
    input.addEventListener("input", function() {
        console.log("输入值已改变");
        console.log("输入值为：" + input.value);
    });
</script>

在上面的代码中，我们创建了一个input元素，并为其添加了一个id属性，值为”myInput”。然后，通过document.getElementById方法获取到该元素，并使用addEventListener方法为其添加了一个input事件的监听器。当输入值改变时，控制台将会输出相应的信息。

检测输入值的改变类型

通过上述的方法，我们可以监听输入值的改变，但如何确定改变是由用户输入还是通过 JavaScript 改变的呢？

可以使用event对象来判断改变的类型。event对象提供了一些属性用于检测输入值的改变类型，如event.isTrusted和event.inputType。

event.isTrusted属性返回一个布尔值，表示该事件是否由用户或用户代理触发。如果事件是由用户输入引发的，则返回true；如果是通过 JavaScript 改变引发的，则返回false。

event.inputType属性返回一个字符串，表示此次输入的类型。例如，当通过键盘输入时，event.inputType返回”insertText”；当通过 JavaScript 改变输入值时，event.inputType返回”insertFromPaste”。

以下是一个示例代码：

<input type="text" id="myInput">

<script>
    const input = document.getElementById("myInput");
    input.addEventListener("input", function(event) {
        console.log("输入值已改变");
        console.log("输入值为：" + input.value);
        console.log("事件是否由用户触发：" + event.isTrusted);
        console.log("输入类型：" + event.inputType);
    });
</script>

在上面的代码中，我们添加了两个额外的输出语句，用于显示事件是否由用户触发以及输入的类型。

使用 Mutation Observer

除了使用addEventListener方法监听input事件之外，还可以使用 Mutation Observer 来监听并检测通过 JavaScript 改变的输入值。

Mutation Observer 是一种用于异步监听 DOM 树变化的方法。我们可以使用 Mutation Observer 来监听目标输入元素的值属性的变化，并在值发生改变时执行相应的操作。

以下是一个示例代码：

<input type="text" id="myInput">

<script>
    const input = document.getElementById("myInput");

    // 创建一个 Mutation Observer 实例
    const observer = new MutationObserver(function(mutationsList) {
        for(let mutation of mutationsList) {
            if(mutation.type === 'attributes' && mutation.attributeName === 'value') {
                console.log("输入值已改变");
                console.log("输入值为：" + input.value);
            }
        }
    });

    // 配置 Mutation Observer 监听目标输入元素的值属性的变化
    const config = { attributes: true, attributeOldValue: true, attributeFilter: ['value'] };
    observer.observe(input, config);

    // 修改输入值
    input.value = "新的值";
</script>

在上面的代码中，我们首先创建了一个 Mutation Observer 实例，并定义了观察者的回调函数。在回调函数中，我们检查 mutation 的类型以及属性是否为值属性。如果是值属性的变化，则输出相应的信息。

然后，我们配置 Mutation Observer 监听目标输入元素的值属性的变化，并通过observer.observe方法启动观察。

最后，我们通过 JavaScript 改变了输入的值，并观察控制台输出。