Menu
I am developing webapp using jQuery. I have functionality that adds new row of 3 input fields. After creating these DOM elements I want to focus one of input fields. I am doing it with calling jQuery focus() function on necessary input field.
Problem is that calling focus() works fine in IE6 and FF3.5, but not working in IE8.
I was trying to make simple working example of this problem for showing it here, but with stripped version of code focus() is working fine. So my guess was that DOM is not ready yet when I call focus() in IE8. For this I tried calling setTimeout('myFocus()',400). I had success and in some of cases focus was really working but still not always. Randomly it does not focus my input field.
Question is: Has anybody faced similar problems and does anybody have any idea how to workaround it? Using setTimeout feels like very ugly workaround.
Tnx in advance
Edited : 26.08.2009
Succeeded to reproduce on simple example. Here is HTML+JS code that reproduces this bug on 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>
To reproduce: 1) select value from first dropdown. You will see that first time input is working 2) select value from second dropdown. You will see that bug is reproduced.
Then in code you can comment out line where it shows JS alert(). Strange thing is that if there is this alert() then after it focus is working fine.
Hope this helps to understand where my problem is.
P.S. I need my app to work this way - it is regenerating those inputs after selecting value from dropdown. This is simplified example of my app ;).
328
I had a similar problem with my app, but I can't reproduce the focus problem with your code. My problem was slightly different in that my page had a link hash that made IE not give my element focus.
Anyway, to get around the problem I added a timeout:
setTimeout(function () {
$('.my-thing').focus();
}, 100);
Not noticeable by a user but it gives IE a moment to breathe.
60
In conjunction with Kazys's solution, I found this to fix all my problems (using IE8 & .HTA files):
$("elem").blur();
$("elem").focus().focus();
I have no idea why, but somehow calling focus twice helps IE along.
EDIT: I have found that calling .show() and .select() can also help.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
