focus doesn't work in IE

Question

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:(

Good thing that nobody actually uses Opera – Batkins Jan 30 '19 at 23:35 — Batkins, Jan 30 '19 at 23:35

zaf · Accepted Answer · 2020-09-23T12:44:59.933

40

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 ) ;

edited Sep 23 '20 at 12:44

answered Apr 08 '10 at 13:37

zaf

22,776
12
65
95

@zaf yes man, it works fine;) but now i've notised, that it doesn/t work in opera:) – Simon Apr 08 '10 at 13:45
Updated my answer with a possible solution. Let us know if it works for you. – zaf Apr 08 '10 at 14:09
3

I enjoyed the straightforward 'due to it being lazy' explanation :) – wooters Sep 02 '15 at 18:27
I am facing similar issue in IE but even after adding much delay 200 this is not working as expected. intermittently, it fails to focus on the input field – yeppe Sep 23 '16 at 11:21
1

How would you recommend making this solution more dynamic to varying load times of the page? – nuccio Sep 10 '20 at 16:29
@nuccio You could check for the dom element is up and running before you do the focus. This way it does not break the function and stop the continuous setTimeout. – zaf Sep 14 '20 at 09:10
1

@Zaf, Thanks, this ended up being the solution. – nuccio Sep 21 '20 at 20:14
@nuccio Updated answer with code snippet which handles your use case of varying load times of page. – zaf Sep 23 '20 at 12:45
Thanks, much appreciated! – nuccio Sep 24 '20 at 16:04

score 3 · Answer 2 · edited May 23 '17 at 12:32

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

score 0 · Answer 3 · edited May 04 '12 at 07:28

0

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);
}

edited May 04 '12 at 07:28

antyrat

27,479
9
75
76

answered May 04 '12 at 06:11

ajai

1

1

You may want to explain your answer for the benefit of the OP – Luca Oct 20 '12 at 01:36

score 0 · Answer 4 · answered Apr 08 '10 at 13:32

0

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

answered Apr 08 '10 at 13:32

Kangkan

15,267
10
70
113

@Kangkan maybe via javascript or jquery i can rich it? – Simon Apr 08 '10 at 13:36
@Syom: I tried Javascript, but not the way shown by @zaf. @zaf: thanks. A nice way to go. – Kangkan Apr 08 '10 at 17:00

score 0 · Answer 5 · answered Aug 24 '10 at 19:20

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

score 0 · Answer 6 · edited Jul 03 '18 at 08:51

0

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);

edited Jul 03 '18 at 08:51

Prachi

3,478
17
34

answered Jul 03 '18 at 07:46

Rajnish Kumar

1
1

score 0 · Answer 7 · answered Oct 12 '18 at 12:27

@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);
    }
});

score -2 · Answer 8 · answered Apr 08 '10 at 14:33

-2

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();

answered Apr 08 '10 at 14:33

Chris Love

3,740
1
19
16

Funny works for me in IE and always has.... Yes, just tried it in IE9,8 & 7. worked in every one of them. make sure your selector actually selects the input field you are tring to set your focus. – Chris Love Jan 16 '12 at 21:36
Doesn't work in IE for me either. But I do know that other websites use $(".something").focus(); – Arrow Jun 28 '12 at 05:28
Same, am having problems with this in IE 7. Additionally, if you have more than one element with the class `.initFocus` which one do you expect it to "focus" on? – akousmata Feb 13 '13 at 16:31
if you have multiple elements you are trying to set focus I think it just ignores the request. – Chris Love Feb 20 '13 at 14:33

focus doesn't work in IE

update

8 Answers8

Linked