jQuery Forum

I was never able to find the root cause of this problem, but I didn't discover a workaround. I see the behavior in any text input field listed first in a form - no matter the specific type (email, password, etc.).

I had the same issue in alpha 2 but I have recently been working with 3pre.
I believe I tracked down the offending code late last night which I've identified below.
All of my tests are passing today on various ios devices / versions.
Take a look and let me know how this works for you.

1. /*     on mobileinit, add classes to HTML element
2.     and set handlers to update those on orientationchange and resize*/
3. $(document).bind("mobileinit.htmlclass", function(){
4.     /* bind to orientationchange and resize
5.     to add classes to HTML element for min/max breakpoints and orientation */
6.     $window.bind("orientationchange.htmlclass resize.htmlclass", function(event){
7.         //add orientation class to HTML element on flip/resize.
8.         if(event.orientation){
9.             $html.removeClass( "portrait landscape" ).addClass( event.orientation );
10.         }
11.         //add classes to HTML element for min/max breakpoints
12.         /*
13.         this call to detectResolutioBreakpoints causes input / focus issue
14.         detectResolutionBreakpoints();
15.         */
16.     });
17.     //trigger event manually
18.     $window.trigger( "orientationchange.htmlclass" );
19. });

I just filed this as a bug here: https://github.com/jquery/jquery-mobile/issues/issue/756

I've tried keri.k & gtracy solutions but aint working for me :(

Hello,

Ok, got a Workaround for me.

I have this problem with textareas, not text inputs, and only for iPhoneiOSv3(as far as I am aware). The placeholder solution does not work.

Is the detectResolutionBreakpoints(); in 3pre only? I cant find it in alpha2. I have tried the placeholder and hidden input suggestions and neither have worked. Any links to get the latest version after alpha 2?

I just confirmed that alpha3 is still exhibiting this behavior.

I'm still having this issue in Alpha 4.  It's a very strange one, and I have spent about 3 hours tonight playing with it.  The weird thing is that it doesn't always manifest.  Sometimes I have to refresh my page to make it happen.  I tried a lot of different tweaks to try and put it to bed, but ultimately only deferring the detectResolutionBreakpoints() call until after my page loads (as mentioned above) works decisively. 

I'm seeing the problem here, too with Alpha 4.1 on iOS 4.3.3. ASP.NET MVC webapp, and it's happening on the login screen whether I navigate there manually or because of some required logon redirect. It doesn't look like placeholder or the hidden input did anything to change the behavior. I have to click on Done and then go back in to the field to start typing.

We can see this problem in JQuerymobile 1.0b3 on Iphone 4. But not on Iphone 5 :)

On my iPhone4 (iOS 4.1) with JQM RC1 I don't see this problem. I tap into a field (textbox) and it receives the focus and the keyboard slides into view.

I do however have a problem with the 'required' and 'autofocus' attributes.

The 'autofocus' doesn't work properly on my iPhone4. When the DOM switches to my page (I have multiple pages in the one html document), the field is given the focus because the keyboard slides into view then it immediately slides back down again and the field does not have the focus.

Here's some code you can test if you like:

1.     <section id="settings-edit" data-role="page">
      
           <div data-role="header" data-position="fixed" data-theme="b">
               <h1>Edit Settings</h1>
           </div>
          
           <div data-role="content" data-theme="d">
               <form id="form-settings-edit">
                   <div class="ui-body ui-body-d">
                       <h3>Details</h3>
                       ID: <input type="text" name="txtMerchantID" id="txtMerchantID" placeholder="Your iCharge Merchant ID" required autofocus maxlength="10" />
                   </div>
                   <div class="ui-body ui-body-d">
                       <h3>Information</h3>
                       Business Name: <input type="text" name="txtBizName" id="txtBizName" placeholder="Your Business Name" required maxlength="30" />
                       Customer Service Phone: <input type="tel" name="txtBizCustPhone" id="txtBizCustPhone" placeholder="Your Customer Service Telephone Number" required maxlength="20" />
                   </div>
                   <a href="#settings" data-rel="back" data-role="button" data-inline="true" data-icon="arrow-l" data-iconpos="left">Cancel</a>
                   <input type="submit" name="settings-edit-btnSave" id="settings-edit-btnSave" value="Save" data-inline="true" data-theme="b" data-icon="arrow-r" data-iconpos="right" />
               </form>
           </div>
          
       </section>
   
   

Hi. I've got this bug, too - and it appears to be general problem of the iOS: we tried on a different iPhones / iPads, and we use not JQuery, but YUI. But the workaround with adding the placeholder attribute works.