javascript focus() not working on Firefox and IE?

I'm trying to appear a form and focus it, for some reason it only works on Chrome. How can I make it work across browsers?

<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="submi开发者_如何转开发t" value="ir" style="padding: 2px 6px;">
        </form>
    </div>

You can see it not working in here:

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

What can I do to make it work? Thanks

Works for me under Firefox. However, this may be due to needing a delay after showing the item. Try changing your code to this:

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

This adds a 1ms delay to allow the item to be made visible, so it should work under IE.

jsfiddle updated

Explanation of why:

Under IE, an element that is not visible cannot receive focus. Depending on the version of IE, it doesn't always re-render (or re-flow) the document until after the current JavaScript function has returned. This leads to all kinds of weird behavior, but mostly, you don't see visual updates during JavaScript code blocks. Combined with the inability to assign focus, your last line of JS was either throwing an error, or being silently ignored.

Adding the setTimeout effectively gives control back to the browser, so it can reflow the document. Then, it immediately runs the timer function, and sets the focus. The 1ms timeout is enough, because the browser will take over even if there's a timer waiting.

You just need to swap the order of things:

    <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>    

The divs have to be in the DOM before JavaScript can look for them. This is the primary benefit of JQuery's $(document).ready(function(){ ...});

You may use return false and its working me for 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> 

You need to hack browser by a trick such as setTimeout code is as follows

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