如何在不同瀏覽器中可靠地設定輸入元素的焦點？

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中文網其他相關文章！