CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Simon
Simon

Reputation: 23141

focus doesn't work in IE

i have 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();
  }

but focus() doesn't work in ie7, so what can i do! i want to have the cursor inside of input!

thanks

update

great solution, thanks, but now it doesn't work in opera:(

Upvotes: 18

Views: 45921

Answers (8)

zaf
zaf

Reputation: 23244

For IE you need to use a settimeout function due to it being lazy, for example:

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

From http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/

For opera, this may help: how to set focus in required index on textbox for opera

UPDATE:

The following snippet of code handles the case when the element is unavailable and retries after a short period - perfect for slow loading pages and/or elements not available until some time after.

setTimeout(

function( ) {

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

}

, 10 ) ;

Upvotes: 40

Adam Targosz
Adam Targosz

Reputation: 1

@Bojan Tadic THANK YOU!

Below Code did the trick :)

$('body').focus(); //First focus on random element

I think the issue comes up when you use input and a placeholder. Managed so solved this thanks to this answer, I was missing that $(body).focus. Made this code to run only on IE so that all my inputs can be freely accessed by 'tabbing'. Previously when I had only tabIndex on my inputs I was able to move to the next one but focus wasn't complete and couldn't write anything in it.

This is complete code. 

$('input[name^="someName"]').on('keydown', function(e){
    var keyCode = e.which || e.keyCode;
    if(keyCode === 9){
        e.preventDefault();
        $('body').focus();
        var nextTabIndex = parseInt($(this).attr("tabIndex"));
        nextTabIndex++;
        setTimeout(function(){$('input[tabIndex=' + nextTabIndex +']')[0].focus();},20);
    }
});

Upvotes: 0

Rajnish Kumar
Rajnish Kumar

Reputation: 1

In Case you are looking to set focus in 1st input element of last row in table.Name of my div where i have kept my table is tableDiv and i am setting focus to last row's 1st inputtext

setTimeout(function(){                
    $($('#tableDiv  tr:last').find('input[type=text]')[0]).focus();
},2);

Upvotes: 0

Bojan Tadic
Bojan Tadic

Reputation: 43

We hit the same issue. For focusing we are using General function which is applying settimeout solution mentioned in: http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/ with 100 milliseconds.

Still on some screens it's not working properly. Especially when iframes are included. There is another known and similar IE issue:
IE 9 and IE 10 cannot enter text into input text boxes from time to time -> IE 9 and IE 10 cannot enter text into input text boxes from time to time

What I have noticed is when you have focus, without pointer, you can apply workaround by pressing TAB key (focus on next element) and than SHIFT+TAB which will return to our target element with focus and typing pointer. In order to be sure we can type inside input we focus on random element and then on our target input.

$('body').focus();
n.focus();

So we applied the same solution in javascript/JQuery in our general focus function. So there is an if statement

...        
if($.browser.msie) {
    setTimeout(function() { try {
        $('body').focus(); //First focus on random element
        $(n).focus(); //Now focus on target element
    } catch (e) { /*just ignore */ } }, 100); //See http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/
} else { //Standard FF, Chrome, Safari solution...
...

To be sure since there is big regression we are still keeping solution with settimeout as a backup. Tested on IE10, IE11, Firefox 45, Chrome 49.0.2623.87

Upvotes: 3

ajai
ajai

Reputation: 1

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

Upvotes: 0

markiyanm
markiyanm

Reputation: 348

I've had the same issue and was able to get IE to work using code behind by making a SetInitialFocus function and calling it in my PageLoad function.

Take a look at the following example and give it a shot, it worked for me. http://www.cambiaresearch.com/c4/df9f071c-a9eb-4d82-87fc-1a66bdcc068e/Set-Initial-Focus-on-an-aspnet-Page.aspx

Upvotes: 0

Chris Love
Chris Love

Reputation: 3893

Its is very easy using jQuery, not sure why you are doing it the hard way :) In this example I have a class assigned to the input field I want the initial focus set called initFocus. You can use any selector you want to find your element. from your code I would use $("#pas").focus();

$(".initFocus").focus();

Upvotes: -2

Kangkan
Kangkan

Reputation: 15571

IE7 does not support the focus() method. I don't see any method.

Upvotes: 0

Related Questions