Question

在Firefox中使用onblur和onfocus事件的文本框时遇到问题。

在Opera中。它按预期工作（例如，首先调用onfocus，然后调用onblur）。

在Firefox中，首先调用onblur，然后调用onfocus。这不应该发生。

如何解决这个问题？

Answer 1

很高兴知道某些浏览器以这种方式被破坏了。请考虑以下代码。

<input type="text" id="t1" onfocus="is_editing=true" onblur="is_editing=false" />
<input type="text" id="t2" onfocus="is_editing=true" onblur="is_editing=false" />

在Opera中，如果单击任一文本字段，is_editing将为真。如果您然后选中其他文本字段... is_editing将为false！

如果您使用函数调用替换上述变量赋值，也会发生同样的情况：enableEditing()和disableEditing()，例如：您从一个字段切换到另一个字段，编辑变为禁用。这显然不是人们想要的！

为了避免这种情况，大多数浏览器现在支持document.activeElement，您需要使用它来做一些非常讨厌的事情：

function enableEdit() { is_editing = true; }

/* Can't just unset is_editing here, since broken browsers may
call onblur /after/ onfocus when tabbing between two text elements.
So, we only unset if we don't have a text element focused */
function disableEdit() {
  if (!document.activeElement) {
    /* For old & broken browser support, could traverse every DOM elem to set
    elem.onfocus = function(){ document.activeElement = elem; }
    For the meantime, I just assume they aren't broken. */
    is_editing = false;
  }
  // If not focused on a text input type, then it's OK to unset.
  else if ("text" != document.activeElement.type) {
    is_editing = false;
  }
}

显然，将is_editing任务替换为你希望在onblur / onfocus上发生的任何内容。

使用jQuery，您显然也可以像我上面使用$("*:focus")一样使用document.activeElement。

在Firefox中onfocus之前，JavaScript事件onblur正在触发

1 个答案: