さまざまなブラウザーで入力要素に確実にフォーカスを設定する方法

IE と Focus イベントの問題

Internet Explorer では focus() イベントの信頼性が低い場合があります。次の関数を使用して入力要素にカーソル フォーカスを設定しようとすると、

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 中国語 Web サイトの他の関連記事を参照してください。