如何在不同浏览器中可靠地设置输入元素的焦点？

IE 和 Focus 事件问题

focus() 事件在 Internet Explorer 中可能不可靠。当尝试使用以下函数将光标焦点设置在输入元素上时：

function change() {
  var input = document.getElementById('pas');
  var input2 = input.cloneNode(false);
  input2.type = 'password';
  input.parentNode.replaceChild(input2, input);
  input2.focus();
}

IE7 将不会响应 focus() 调用，从而将光标留在输入元素之外。要在 IE 中纠正此问题，请使用 setTimeout 函数：

setTimeout(function() { document.getElementById('myInput').focus(); }, 10);

Opera Woes

但是，使用此解决方案会在 Opera 中引入新的困境。要解决此问题，请参阅“如何在 Opera 文本框上的所需索引中设置焦点”等资源。

通用解决方案

为了确保所有浏览器之间的兼容性，请合并处理输入元素无法立即可用的情况的代码片段：

setTimeout(

  function( ) {

    var el = document.getElementById( "myInput" ) ;
    ( el != null ) ? el.focus( ) : setTimeout( arguments.callee , 10 ) ;

  }

, 10 ) ;

此片段每 10 毫秒重试一次焦点，直到元素变得可用，解决了页面加载缓慢和元素延迟的问题可用性。

以上是如何在不同浏览器中可靠地设置输入元素的焦点？的详细内容。更多信息请关注PHP中文网其他相关文章！