javascript - 当文本输入字段在 FireFox 中变为事件状态(而非焦点)时触发事件

Question

我正在尝试检测文本输入字段何时处于事件状态。我最初是使用onfocu实现的，但是，当窗口不再是前景窗口时，会触发onb​​lur事件。这在我的应用程序中产生了意想不到的后果。其中 id 被触发的 DOMActivate 事件，but in firefox this is NOT fired on text:input fields .

Only one element can be active at a time in a document. An active element does not necessarily have focus, but an element with focus is always the active element in a document. For example, an active element within a window that is not the foreground window has no focus.

Fires: button, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:reset, input:submit

Does not fire: input:text, select, textarea

我还使用 input 进行了测试事件。但是，只有当您实际在框中键入内容时才会触发此事件。对于我的应用程序，我需要在输入任何内容之前捕获文本输入字段何时处于事件状态，并且当窗口不在前台时它无法更改状态。

我认为可能有一种方法可以使用突变观察器来做到这一点，然后检查该突变元素是否具有 activeElement ，但这似乎需要更多的开销。我认为没有lostActiveElement 事件，因此这也会添加一些额外的跟踪。有没有更直接/有效的方法来做到这一点？

这是使用 addon sdk 的 Firefox 插件。

Answer 1

我使用mutationobever得到了可用的结果，如下所示:

var activeInputObserver = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if(document.activeElement.tagName === "INPUT"){     
            // do stuff based on this being the active input                
        }else{  
            // the else event is being used like a lost focus event now
            // however, it now makes it global as opposed to per input  
        }       
    });    
});

var activeInputConfig = { attributes: true, childList: true, characterData: true, subtree: true }
var activeInputTarget = document.querySelector('body'); 

if(target != null){ 
    activeInputObserver.observe(activeInputTarget, activeInputConfig);
}

我在 body 上使用突变观察器，并使用 subtree: true 监视所有后代。这并不理想，因为现在只要元素处于事件状态，它就会运行我的所有逻辑，而不是仅在输入字段上运行。它将需要创建一些变量并跟踪它，而不是仅仅依赖于每个元素的事件。通过这种方式无法检测到该元素不再处于事件状态。这种方法可行，但并不理想。

我尝试在每个输入字段上放置突变观察器，但成为事件元素不会触发突变:

var activeInputObservers = [];
inputFields = document.querySelectorAll("input");
for each (var inputField in inputFields){

    var activeInputConfig = { attributes: true, childList: true, characterData: true, subtree: true }
    var activeInputTarget = inputField;

    var thisObserver = new MutationObserver(function(mutations) {
    activeInputObservers.push(thisObserver);
        mutations.forEach(function(mutation) {
            console.log("active element:" + JSON.stringify(document.activeElement)   );         
        });    
    });

    thisObserver.observe(activeInputTarget, activeInputConfig);     
}

使用上面的代码，只需单击元素或按 Tab 键进入元素不会触发可观察到的更改(在字段中键入会触发)。

activeElement 是文档的一个属性，因此您需要监视文档的更改；同样，您仍然无法捕获特定元素中的事件，因此您需要在每次事件元素发生变化时运行一个操作。输入字段本身看起来没有任何变化。