Best IT Recipes

JQuery focus () sometimes doesn't work in IE8

I am developing a webapp using jQuery. I have functionality that adds a new line of three input fields. After creating these DOM elements, I want to focus one of the input fields. I do this with a jQuery focus () function call in the desired input field.

The problem is that the focus () call works fine in IE6 and FF3.5, but doesn't work in IE8.

I tried to make a simple working example of this problem to show it here, but with the split version of the code focus () works fine. So I assumed that the DOM is not ready yet when I call focus () in IE8. To do this, I tried calling setTimeout ('myFocus ()', 400). I had success, and in some cases the focus really worked, but still not always. By chance, he does not focus my input field.

Question: Has anyone encountered similar problems, and does anyone know how to deal with him? Using setTimeout seems like a very ugly workaround.

Tnx in advance

Edited: 08/26/2009

Succeed for playback with a simple example. Here is the HTML + JS code that reproduces this error in IE8.

<html> <head> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> function performChanged() { formChanged = true; } function handleChange() { var parentDiv = $('#container'); newValue = $(html).html(); parentDiv.html(newValue); $(".sel1",parentDiv).bind('change',handleChange); //alert('Uncomment this and after alert focus will be on input'); $("input.cv_values",parentDiv).focus(); } $(document).ready(function() { $('.trackChange').bind('change', handleChange); }); var html = '<div class=\"div1\">\n<select class=\"sel1\" id=\"sel1\" name=\"sel1\"><option value=\"\"><\/option>\n<option value=\"11\">Select me to see problem<\/option>\n<\/select>\n\n\n<input class=\"cv_values\" id=\"sel3\" name=\"sel3\" size=\"30\" type=\"text\" value=\"\" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>'; </script> </head> <body> <select class="trackChange" onchange='performChanged();'> <option value=""></option> <option value="1" >Select me to generate new inputs</option> </select> <div id="container"></div> </body>

Playback: 1) select a value from the first drop-down list. You will see that the first input is working 2) select a value from the second drop-down list. You will see that the error is reproducing.

Then in the code you can comment out the line where JS alert () is displayed. The strange thing is that if there is this warning (), then after the focus is working fine.

Hope this helps to understand where my problem is.

PS I need my application to work this way - it restores these inputs after selecting a value from the drop-down list. This is a simplified example of my application;).

+15
javascript jquery internet-explorer-8
Aug 25 '09 at 9:00
source share
7 answers

It is strange that I had the same problem and resolved it using plain old javascript:

document.getElementById('friend_name').focus();

Using jQuery equivalent $('#friend_name').focus(); not working in IE8: - /

+6
Dec 10 '12 at 15:43
source share
β€” -

I had a similar problem with my application, but I cannot reproduce the focus problem with your code. My problem was slightly different in that my page had a hash link that caused IE to not highlight my element.

In any case, to get around the problem, I added a timeout:

 setTimeout(function () { $('.my-thing').focus(); }, 100);

Not noticeable by the user, but it gives IE a moment to breathe.

+30
Aug 25 '10 at 1:14
source share

Due to Kazys solution, I found this to fix all my problems (using IE8 and .HTA files):

 $("elem").blur(); $("elem").focus().focus();

I have no idea why, but somehow calling focus twice helps IE.

EDIT: I found that calling .show () and .select () might also help.

+8
Jul 25 '13 at 18:32
source share

Had a similar problem with IE8. I would like to focus the input in the dialog box when it is open. Used autoOpen = false. Note that focus does not work only for the first custom item in the dialog box. Tried setTimeout, but it worked only occasionally. The blur element before focusing helped me.

 $('#dialog').find('#name').blur(); $('#dialog').find('#name').focus();
+4
03 Sep
source share

Since you have not posted any code, you use:

 $(document).ready(function(){ //code here });

This will cause javascript to run after loading the html.

And you should also use live events . When your add inputs to dom will automatically be tied to focus.

 $("p").live("focus", function(){ alert( $(this).text() ); });

This means that every p created will be bound to it.

+1
Aug 25 '09 at 11:04
source share

This is the best solution at the moment for setting focus:

$ ('. elt'). fadeIn (200, function () {$ ('. elt'). focus ();});

+1
Apr 10 '13 at 14:29
source share

This is an old question, but it is at the top of the search, so you need to update.

I don't know if there was a time when it was fixed, but I ran into this problem again today in IE11 using jquery-2.1.3. I found that the focus call wrapper in setTimeout, as outlined in Ponny above, works best for me.

I needed to increase the wait time in some cases in order to make it work.

0
Mar 21 '16 at 14:56
source share


More articles:


All Articles