Adding an input field to the dom and focusing it in IE

Question

I am trying to make a div, that when you click it turns into an input box, and focuses it. I am using prototype to achieve this. This works in both Chrome and Firefox, but not in IE. IE refuses to focus the newly added input field, even if I set a 1 second timeout.

Basically the code works like this:

var viewElement = new Element("div").update("text");
var editElement = new Element("input", {"type":"text"});
root.update(viewElement);

// pseudo shortcut for the sake of information:
viewElementOnClick = function(event) {
    root.update(editElement);
    editElement.focus();
}

The above example is a shortened version of the actual code, the actual code works fine except the focus bit in IE.

Are there limitations on the focus function in IE? Do I need to place the input in a form?

Answer 1

My guess is that IE hasn't updated the DOM yet when you make the call to focus(). Sometimes browsers will wait until a script has finished executing before updating the DOM.

I would try doing the update, then doing

setTimeout("setFocus", 0);

function setFocus()
{
    editElement.focus();
}

Your other option would be to have both items present in the DOM at all times and just swap the style.display on them depending on what you need hidden/shown at a given time.

Answer 2

What version IE? What's your DocType set to? is it strict, standards or quirks mode? Any javascript errors appearing (check the status bar bottom left for a little yellow warning sign) ? Enable error announcing for all errors via Tools > Options > Advanced.

Oisin

Answer 3

The question is already answered by 17 of 26. I just want to point out, that Prototype has native mechanism for this: Function.defer()