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仅在用户对输入元素所做的更改（大多数情况下是元素失去焦点）时发生。

尝试使用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”条件。

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

3 个答案: