我正在尝试检测文本输入字段何时处于事件状态。我最初是使用onfocu实现的,但是,当窗口不再是前景窗口时,会触发onblur事件。这在我的应用程序中产生了意想不到的后果。其中 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 插件。
最佳答案
我使用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
是文档的一个属性,因此您需要监视文档的更改;同样,您仍然无法捕获特定元素中的事件,因此您需要在每次事件元素发生变化时运行一个操作。输入字段本身看起来没有任何变化。
关于javascript - 当文本输入字段在 FireFox 中变为事件状态(而非焦点)时触发事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25477171/