Different behavior of blur event in different browsers

后端 未结 3 567
爱一瞬间的悲伤
爱一瞬间的悲伤 2020-12-15 10:14

Consider this example where I have 2 input fields:



And consider t

3条回答
  •  失恋的感觉
    2020-12-15 10:39

    According to this archive of whatwg.org:

    An element is focusable if the user agent's default behavior allows it to be focusable or if the element is specially focusable, but only if the element is either being rendered or is a descendant of a canvas element that represents embedded content.

    It seems that all browsers also don't make visibility:hidden and display:none input elements focusable. The following JavaScript tests in which cases is an element focusable.

    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
    '; }

    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
    '; } 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;
    
    
    
    
    
    
    

    Here's the output in Firefox 34.0.5 and 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
    

提交回复
热议问题