How to Focus a Cloned Input Field in IE and Opera?

FOCUS Input Field Issue in IE and Opera

Problem:

The code below fails to focus the cloned input field in Internet Explorer 7:

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

Solution for IE:

Internet Explorer is notoriously "lazy" when it comes to focusing elements. To resolve this, you can use a setTimeout function:

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

Solution for Opera:

In Opera, you may encounter problems setting focus on elements that are created dynamically or appear after page load. Refer to the following resources for potential solutions:

• [How to set focus in required index on textbox for Opera](https://stackoverflow.com/questions/2099366/how-to-set-focus-in-required-index-on-textbox-for-opera)

Enhanced Solution:

To handle cases where the element may not be available immediately, you can use the following snippet:

setTimeout(

    function( ) {

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

    }

, 10 ) ;

This code retries focusing the element every 10 milliseconds until it becomes available, addressing potential issues with slow loading or delayed element appearance.

The above is the detailed content of How to Focus a Cloned Input Field in IE and Opera?. For more information, please follow other related articles on the PHP Chinese website!