当字段自动归档时触发 OnChange？

Question

当我的一个字段（文本框）发生变化时，我想触发一个函数。问题是：该文本框的内容由外部脚本（我无权访问）自动归档，因此不会触发 onChange 侦听器。我已经尝试了很多代码，但这是我最接近的两个（我认为？）结果：这是脚本和字段<script async src="SomeNiceScriptHere.js"></script><input type="text" name="wt_embed_output" id="wt_embed_output" class="wt_embed_output"/>代码 1：function myFunction() {    var x = document.getElementById("wt_embed_output").value;    alert("The input value has changed. The new value is: " + x);}    document.getElementById("wt_embed_output").addEventListener("change", myFunction);代码 2：$( "#wt_embed_output" ).change(function() {  alert( "Value has been changed" );});目前，当使用脚本更新值时它不起作用，它仅在用户手动更改值时起作用。有谁知道一种方法吗？

Answer 1

尝试在input.

var el = document.getElementById('wt_embed_output');

el.value = 'New Value'

el.dispatchEvent(new Event('oninput'));

  

document.getElementById("wt_embed_output").addEventListener("oninput", myFunction());

function myFunction() {

  var x = document.getElementById("wt_embed_output").value;

  alert("The input value has changed. The new value is: " + x);

}

<input type="text" name="wt_embed_output" id="wt_embed_output" class="wt_embed_output" />

Answer 2

onchange 仅在用户提交对 input 元素的更改时发生，大多数时候这是元素失去焦点的时候。

尝试使用oninput事件；

如果这不起作用，您可以使用适用于所有情况的解决方案：使用 setInterval()

Answer 3

这不是一个完美的解决方案，但它有效。由于我无法在脚本执行后立即获取字段中的文本，因此我对 myFunction() 做了一些解决方法：

<script>

    function myFunction() {

        if(document.getElementsByClassName('wt_embed__message')[0].getElementsByClassName('main')[0].textContent != 'Upload completed!'){

            setTimeout(myFunction, 500);

        }

        else{

            var wt_output = document.getElementById("wt_embed_output").value;

            //do something

        }

    }

    window.addEventListener("load", myFunction);

</script>

-> 当页面加载时，我的函数被调用直到外部脚本运行。一旦我收到指定的消息，我就知道脚本已完成，因此我摆脱了“if”条件。