Question

我目前正在开发一个greasemonkey脚本。此脚本的一部分将需要检测没有用户交互的输入框的更改。有一段时间我使用了几个事件触发器，例如mousemove或keyup / down，并比较旧值和新值并相应地进行更新。出于某种原因，在我的情况下这可能会失败。

该方案是一个系统，其中页面的各个部分是动态更改的，并且输入框会自动更改以反映当前访问的部分。

我已尝试使用setInterval来尝试检测更改但我相信这些天必须有更好的解决方案。

这是我一直使用的一个例子，它似乎在大多数时间都有用，但我真的需要一个更可靠的解决方案。

$(document).mousemove(function(event){
    if(savedId !== $('.only_class_element').val()){

除了setInterval之外还有什么方法可以检测到没有用户交互的输入框的值更改？

这当然是在dom准备好的时候调用的

Answer 1

通常，对于<input>或类似内容，您可以使用change事件。 EG：

$('.only_class_element').on ("change", function (zEvent) {
    // DO WHATEVER HERE.
} );

但是，如果元素实际上不是输入类型，或者通过AJAX添加/删除/重新创建元素本身，则必须使用间隔（或Mutation Observers，但我不建议这样做）。顺便说一句，与mousemove的未经过滤的监控相比，间隔的侵入性/资源密集程度要小得多！

在破坏性的AJAX案例中，使用waitForKeyElements()，如下所示：

// ==UserScript==
// @name     _Monitor Cheshire-cat element for changes
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
waitForKeyElements (".only_class_element", fireOnChangedValue);

function fireOnChangedValue (jNode) {
    var nodeVal     = $.trim (jNode.val () );
    var lastVal     = jNode.data ("lastVal")  ||  "";

    if (nodeVal != lastVal) {
       //  DO WHATEVER WITH nodeVal HERE.
    }

    jNode.data ("lastVal", lastVal);
    return true;
}

GM / JS / JQ - 没有事件的输入变化

1 个答案: