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

IE and Focus Event Troubles

The focus() event can be unreliable in Internet Explorer. When attempting to set the cursor focus on an input element using the following function:

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

IE7 will not respond to the focus() call, leaving the cursor outside of the input element. To rectify this issue in IE, employ a setTimeout function:

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

Opera Woes

However, using this solution introduces a new predicament in Opera. To address this, consult resources such as "How to set focus in required index on textbox for Opera."

Universal Solution

To ensure compatibility across all browsers, incorporate a code snippet that handles the scenario where the input element is not immediately available:

setTimeout(

  function( ) {

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

  }

, 10 ) ;

This snippet retrys focus every 10 milliseconds until the element becomes available, resolving the issue for both slow-loading pages and delayed element availability.

The above is the detailed content of How to Reliably Set Focus on Input Elements in Different Browsers?. For more information, please follow other related articles on the PHP Chinese website!