focus(); not working in IE.

Scriptdaemon

05-02-2007, 05:37 AM

This function works perfectly in Firefox, however in IE it does not focus when it should. For an example of what this does, click any of the "1 CD, 1 DVD" links on this test page http://moth.homelinux.com/~scriptdaemon/test/test.html

What should occur is shown in Firefox. It should focus on the CD input field after clicking the link and then focus on the DVD input field after enter is pressed in the CD input field, or vice versa depending on which field was submitted first. In IE, this doesn't focus in any occasion at all.

function editItems(number) {
if(edited)
return;
edited = true;
var tD = document.getElementById("itemsTd" + number);
tD.align = "center";
tD.style.padding = "0px";
tD.innerHTML = "<input type=\"text\" id=\"cdsInput\" style=\"width: 16px\" value=\"" + rows[number].cds + "\" />";
tD.innerHTML += " <input type=\"text\" id=\"dvdsInput\" style=\"width: 16px\" value=\"" + rows[number].dvds + "\" />";
var cdField = document.getElementById("cdsInput"), dvdField = document.getElementById("dvdsInput");
cdField.focus();
var save = function() {
if(rows[number].cds == 0 && rows[number].dvds == 0) {
alert("There must be at least one disc.");
return;
}
createTable();
edited = false;
};
cdField.onkeydown = function(event) {
if(isEnter(event, this)) {
rows[number].cds = cdField.value;
tD.innerHTML = rows[number].cds + " CD";
tD.innerHTML += " <input type=\"text\" id=\"dvdsInput\" style=\"width: 16px\" value=\"" + dvdField.value + "\" />";
dvdField = document.getElementById("dvdsInput");
dvdField.focus();
dvdField.onkeydown = function(event) {
if(isEnter(event, this)) {
rows[number].dvds = dvdField.value;
save();
}
};
}
};
dvdField.onkeydown = function(event) {
if(isEnter(event, this)) {
rows[number].dvds = dvdField.value;
tD.innerHTML = "<input type=\"text\" id=\"cdsInput\" style=\"width: 16px\" value=\"" + cdField.value + "\" /> ";
tD.innerHTML += rows[number].dvds + " DVD";
cdField = document.getElementById("cdsInput");
cdField.focus();
cdField.onkeydown = function(event) {
if(isEnter(event, this)) {
rows[number].cds = cdField.value;
save();
}
};
}
};
}

EDIT: You should also probably know, while not relevant to this problem, only the up and down arrows effect what's in the input fields after clicked.

david_kw

05-02-2007, 06:39 AM

I'm not sure I understand exactly what is going on behind the scenes but I have an idea how to fix it. The problem appears to be that IE isn't able to find the element with the id yet. So what you can do is set a timeout to set the focus which gives IE time to "solidify" the DOM enough to find it correctly. It's an odd situation because sometimes what you are doing works.

Anyway, to fix it try replacing this line

cdField.focus();

with

setTimeout(function () { cdField.focus(); }, 0);

Here is a quick example I used to test it myself to see if it works. The problem appears to be in the innerHTML += part which you might also be able to change to solve the problem (avoiding doing += on innerHTML is a good idea anyway).

<html>
<head>
<title>Pause on Focus</title>
<script type="text/javascript">
function doItNow() {
var adiv = document.getElementById("adiv");
adiv.innerHTML = "<input type='text' id='t'/>";
adiv.innerHTML += "<input type='text' id='s'/>";
document.getElementById("t").focus();
}

function doItSoon() {
var adiv = document.getElementById("adiv");
adiv.innerHTML = "<input type='text' id='t'/>";
adiv.innerHTML += "<input type='text' id='s'/>";
setTimeout(function () {
document.getElementById("t").focus();
}, 0);
}

function clearIt() {
var adiv = document.getElementById("adiv");
adiv.innerHTML = "";
}
</script>
</head>
<body>
<div>
<button onclick="doItNow();">Do it now</button>
<button onclick="doItSoon();">Do it soon</button>
<button onclick="clearIt();">Clear it</button>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>

david_kw

Scriptdaemon

05-02-2007, 07:02 AM

I did not know that += should be avoided when regarding innerHTML, so thanks for that. I put them on the same line just to quickly test if that was entirely the problem, and now it will focus when you initially click the link, however it does not effect after you submit the first input field (I took out all instances of += when dealing with innerHTML, and it only fixed the initial focus).

Though, when adding the timeout (only changing 0 to 1 instead), it does work for the latter two parts.

david_kw

05-02-2007, 07:13 AM

Typically I have heard to avoid += with innerHTML for speed issues. It is a much slower operation to do the addition on innerHTML than it is on an intermediate variable. This is the first time I've seen this particular problem with it.

david_kw