Question

I am using jQuery Mobile to create a mobile ASP.NET MVC site

I am having trouble tracking down cases where the soft keyboard does not show after clicking inside an input element on the form. This problem is intermittent but occurs frequently.

The rendered html looks like this (this is captured from Chrome – not the Android browser)

 <div data-role="content" data-theme="a">

<form action="/Enrollment/Mobile/Enroll/MyForm" method="post">            
   <div data-role="fieldcontain">

                All fields are required.

            </div>

            <div data-role="fieldcontain">

                <label for="FirstName">First Name</label>

                <input class="text-box single-line" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" type="text" value="" />

                <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="false"> </span>

            </div>

            <div data-role="fieldcontain">

                <label for="LastName">Last Name</label>

                <input class="text-box single-line" data-val="true" data-val-required="The Last Name field is required." id="LastName" name="LastName" type="text" value="" />

                <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="false"> </span>

            </div>
<div>

This works in the standard web browsers, the Android 2.3.3 emulator and iOS devices. It fails intermittently on Android 2.3.3 devices (only Android devices actually tested so far).

Any clues on what might be causing this?

Answer 1

This was caused by an errant div on the outside of the page. The code I inherited had the outer jQuery Mobile elements nested inside a div. Don’t do this. This code worked in most cases, but not on Android phone devices.