javascript focus() non funziona su Firefox e IE?

Sto cercando di apparire una forma, e mettere a fuoco, per qualche motivo, non funziona solo su Chrome. Come faccio a farlo funzionare su diversi browser?

<script>
function SearchCity(evt){
    document.getElementById('ciudad-eq').style.display='none';
    document.getElementById('buscarciudad').style.display='inline';
    document.getElementById("city").focus();
}
</script>    


    <div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;">
    Not from Miami?
    </div>

    <div id="buscarciudad" style="display: none;">
        <form role="search" method="post" id="searchform" action="insert/insert-ip.php">
            <input type="text" id="city" name="ciudad" value="¿Cual es tu ciudad?" style="width: 140px;" >
            <input type="submit" value="ir" style="padding: 2px 6px;">
        </form>
    </div>

Si può vedere che non funziona qui:

http://jsfiddle.net/CCxrp/1/

Cosa posso fare per farlo funzionare? Grazie

  • il tuo link funziona come previsto in firefox e
  • Funziona bene in Firefox 5 e IE 6 (come previsto) in una pagina locale. jsfiddle non funziona in IE 6, sì, l’ho visto “non funzionante”. 🙂
InformationsquelleAutor lisovaccaro | 2011-08-04



4 Replies
  1. 0

    Hai solo bisogno di scambiare l’ordine delle cose:

        <div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;">
        Not from Miami?
        </div>
    
        <div id="buscarciudad" style="display: none;">
            <form role="search" method="post" id="searchform" action="insert/insert-ip.php">
                <input type="text" id="city" name="ciudad" value="¿Cual es tu ciudad?" style="width: 140px;" >
                <input type="submit" value="ir" style="padding: 2px 6px;">
            </form>
        </div>
    
    <script>
    function SearchCity(evt){
        document.getElementById('ciudad-eq').style.display='none';
        document.getElementById('buscarciudad').style.display='inline';
        document.getElementById("city").focus();
    }
    </script>    

    Div devono essere in DOM prima di JavaScript può guardare per loro. Questo è il vantaggio principale di JQuery e $(document).ready(function(){ ...});

  2. 4

    Per me funziona con Firefox. Tuttavia, questo può essere dovuto al bisogno di un ritardo dopo aver mostrato la voce. Prova a cambiare il tuo codice in questo modo:

    function SearchCity(evt){
        document.getElementById('ciudad-eq').style.display='none';
        document.getElementById('buscarciudad').style.display='inline';
        setTimeout(function() { document.getElementById("city").focus(); }, 1);
    }

    Questo aggiunge un 1ms ritardo per consentire l’elemento visibile, così dovrebbe funzionare sotto IE.

    jsfiddle aggiornato

    Spiegazione del perché:

    Sotto IE, un elemento che non è visibile non può ricevere lo stato attivo. A seconda della versione di IE, non sempre re-rendering (o re-flow) il documento fino a quando dopo l’attuale funzione JavaScript è tornato. Questo porta a tutti i tipi di strano comportamento, ma soprattutto, non vedi visual aggiornamenti durante JavaScript blocchi di codice. Combinato con l’impossibilità di assegnare messa a fuoco, la tua ultima riga di JS era generando un errore, o di essere ignorata.

    Aggiunta la setTimeout di fatto dà il controllo al browser, quindi è possibile ridisporre il documento. Quindi, si esegue immediatamente la funzione timer, e imposta la messa a fuoco. Il 1ms timeout è sufficiente, perché il browser di prendere in consegna, anche se c’è un timer di attesa.

  3. 0

    Si può usare return false e il suo lavoro di me per firefox.

       <script>
        function SearchCity(evt){
            document.getElementById('ciudad-eq').style.display='none';
            document.getElementById('buscarciudad').style.display='inline';
            document.getElementById("city").focus();
            return false;
        }
        </script> 
  4. 0

    Avete bisogno di hackerare il browser da un trucco come setTimeout codice è il seguente

    setTimeout(function(){
       $("#contril_id").focus();
    },500);

Lascia un commento