首頁 > web前端 > css教學 > 如何在不同瀏覽器中可靠地設定輸入元素的焦點?

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

DDD
發布: 2024-11-01 07:00:30
原創
315 人瀏覽過

How to Reliably Set Focus on Input Elements in Different Browsers?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板