Aggiunta di un campo di input al dom e messa a fuoco in IE

Question

Sto cercando di fare un div, che quando fai clic su di esso si trasforma in una casella di input e lo focalizza. Sto usando il prototipo per raggiungere questo obiettivo. Funziona sia con Chrome che con Firefox, ma non con IE. IE rifiuta di focalizzare il campo di input appena aggiunto, anche se ho impostato un timeout di 1 secondo.

Fondamentalmente il codice funziona in questo modo:

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

L'esempio sopra è una versione abbreviata del codice effettivo, il codice effettivo funziona bene tranne il bit di attivazione in IE.

Ci sono limitazioni sulla funzione focus in IE? Devo inserire l'input in un modulo?

Answer 1

La mia ipotesi è che IE non abbia ancora aggiornato il DOM quando effettui la chiamata per focus (). A volte i browser attendono il completamento dell'esecuzione di uno script prima di aggiornare il DOM.

Proverei a fare l'aggiornamento, quindi a

setTimeout("setFocus", 0);

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

L'altra opzione sarebbe quella di avere entrambi gli elementi presenti nel DOM in qualsiasi momento e scambiare lo style.display su di essi a seconda di ciò che è necessario nascosto / mostrato in un determinato momento.

Answer 2

Quale versione IE? Qual è il tuo DocType impostato? è rigoroso, standard o modalità stranezze? Vengono visualizzati errori javascript (controlla la barra di stato in basso a sinistra per un piccolo segnale di avvertimento giallo)? Abilita l'annuncio degli errori per tutti gli errori tramite Strumenti > Opzioni > Avanzate.

Oisin

Answer 3

Alla domanda è già stata data una risposta 17 di 26 . Voglio solo sottolineare che Prototype ha un meccanismo nativo per questo: Function.defer ( )