cursor not focus text box in mobile browser.

cursor not focus text box in mobile browser.

I has a page with few text box inside the section and div.  When page load, i need it focus on the first text box.  I try it in safari browser in desktop, it is work but it not work in iphone mobile browser.  i using ("#id").focus(), i cant see the cursor and the virtual keyboard not appear. Below is my html tag.

<section id="container" data-role="page" class="type-index">
      <div class="content-login content" id="cont">
            <form action="#" method="get" accept-charset="utf-8" class="form-1 form-login">
                  <div id="cover">
                          <div data-role="fieldcontain">
                                  <input type="text" name="id" id="id" value=""  placeholder="ID"/> 
                          </div>
                           <div data-role="fieldcontain">
                                  <input type="text" name="pwd" id="pwd" value="" placeholder="password"/> 
                          </div>
                  </div>
            </form>
      </div>
</section>
In the page load event, i using ("#id").focus(), but the cursor not appear in the text box and the virtual keyboard not appear.  
I'm also using
$("#cover input:text").eq(0).focus(), but it not luck.

There only select effect for the text box.  Below is the screen cap from my iphone how the focus work.  It only select the text box but the cursor not in the text box.  Any one has idea what wrong for my html tag or the focus function?  Please help