Question

Consider this example我有2个输入字段：

<input id="a" />
<input id="b" style="display: none" />

考虑以下JavaScript，尝试这样做：

仅在#b有焦点时展示#a并在#b失去焦点时隐藏#a，除非#a失去焦点#b 1}}。

$("#a").focus(function() {
    $("#b").show();
});

$("#a, #b").blur(function() {
    $("#b").hide();
});

$("#b").focus(function(){
    $("#b").show();
});

$("#a").focus(function() {
  $("#b").show();
});

$("#a, #b").blur(function() {
  $("#b").hide();
});

$("#b").focus(function() {
  $("#b").show();
});

#b {
  display: none;
}

<input id="a" value=a>
<input id="b" value=b>
<br/>^ focus on the input

上述代码不正确，因为$("#b").focus()永远不会被触发，因为只要#a失去焦点，#b就会被隐藏。在Firefox（版本24.6.0）中观察到了这种预期的行为。

但在Chrome（版本35.0）中，代码似乎运行不正确^{（或正确！？）}。

显然，b.focus event is still being registered in Chrome。为什么此事件在Chrome中注册，而在Firefox中注册？

更新

正如raina77ow所指出的那样：

在Chrome浏览器中，在我们将光标放在b后，首先触发a上的模糊，然后关注b和{{1}保持可见。
在Firefox 中，焦点b未被触发，因此b变得不可见。
在IE10 中，不知何故会关注b被触发，但b会立即变为隐身，因为此后b会触发模糊。< / LI>

Here's a fiddle without using jQuery，产生相同的行为。

Answer 1

如您所知，问题是不同的浏览器选择以不同的顺序调用事件处理程序。一种解决方案是通过将计时器设置为0毫秒，然后检查字段以查看哪些（如果有）被聚焦来为其他事件提供触发机会。

a.onfocus = function() {show(b);};

a.onblur = function() {
    setTimeout(function() {
        //if neither filed is focused
        if(document.activeElement !== b && document.activeElement !== a){
            hide(b);
        }
            }, 0);
};

//same action as for a
b.onblur = a.onblur;

在Chrome，Firefox，Internet Explorer和Safari中测试过。请参阅JSFiddle.net的完整工作示例（小提琴的编辑版本）。

Answer 2

你可以使用extravarible来检查b是否在隐藏b之前被聚焦。它适用于IE，Chrome和＆amp; Firefox浏览器。我没有任何其他浏览器。你可以检查一下。

var focusedB = false;
$("#a").focus(function(){
     $("#b").show();   
 });
 //if b is focused by pressing tab bar.
 $("#a").keydown(function(e){
     if(e.which === 9){
          focusedB = true;  
      }
   });
   $("#b").blur(function(){
        $("#b").hide();
   });
   $("#a").blur(function(){
       if(focusedB){
            focusedB = false;
        }else{
            $("#b").hide();
        }
    });
    $( "#b" ).mousedown(function() {
       focusedB = true;
    });

Answer 3

根据this archive of whatwg.org：

如果用户代理的默认行为允许，则元素可聚焦 它是可聚焦的，或者如果元素是专门可聚焦的，但仅限于如果元素正在渲染或是画布的后代表示嵌入内容的元素。

似乎所有浏览器都不能使visibility:hidden和display:none输入元素具有可调焦性。 The following JavaScript测试中哪些情况是可以关注的元素。

function isFocusable(type) {
    var element = document.getElementById(type);
    result += type + ' is';
    try {
        element.focus();
        if (element != document.activeElement)
            result += ' not';
    } catch (e) {
      result += ' not (error thrown)';
    }
    result += ' focusable<br>';
}

＆＃13;

var result = '';

function isFocusable(type) {
  var element = document.getElementById(type);
  result += type + ' is';
  try {
    element.focus();
    if (element != document.activeElement)
      result += ' not';
  } catch (e) {
    result += ' not (error thrown)';
  }
  result += ' focusable<br>';
}

isFocusable('text');
isFocusable('hidden');
isFocusable('disabled');
isFocusable('readonly');
isFocusable('visiblity-hidden');
isFocusable('display-none');
isFocusable('div-hidden');

document.getElementById('browser-version').innerHTML = navigator.userAgent;
document.getElementById('logger').innerHTML += result;

＆＃13;

<input id=text type=""></input>
<input id=hidden type="hidden"></input>
<input id=disabled disabled></input>
<input id=readonly readonly></input>
<input id=visiblity-hidden style="visibility:hidden"></input>
<input id=display-none style="display:none"></input>
<div id=div-hidden sytle="visibility:hidden" tabindex=1>
  </input>

  <div id=browser-version></div>

  <div id=logger></div>

＆＃13;

这是Firefox 34.0.5和Chrome 39.0.2

中的输出

Gecko/20100101 Firefox/34.0
text is focusable
hidden is not focusable
disabled is not focusable
readonly is focusable
visiblity-hidden is not focusable
display-none is not focusable
div-hidden is focusable

AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36
text is focusable
hidden is not focusable
disabled is not focusable
readonly is focusable
visiblity-hidden is not focusable
display-none is not focusable
div-hidden is focusable

不同浏览器中模糊事件的不同行为

3 个答案: