CODEWITHSUNDEEP
androidhtmljquery-mobilecordova
Nicklas Savonen
Nicklas Savonen

Reputation: 159

jQuery Mobile on Android - textbox and numeric keyboard issues

I am developing an app with PhoneGap and jQuery Mobile for iOS and Android. My code works just fine in iOS 5, but I am having a lot of trouble with Android 2.3.*.

  1. First - Android does not support input type="date", as iOS does. Is there a way to use some kind of simple plugin to show a date picker?

  2. This "bug" (or feature) is only present when debugging on a device, not in the emulator. Look at this screenshot of my login page in the app:

Textbox error

When I select the Username textbox the keyboard and a white box shows. The white box contains the text Password. Really strange. The code for the Username text box:

<label for="username" class="i18n-login-username-label">Username: </label>
<input type="text" value="" name="username" id="username" data-form="ui-body-a" />

Is there a way to get rid of that white, ugly textbox and write the text directly into the Username textbox as it should be?

3 This is one of many settings pages in the app, the user should input numbers in a couple of fields. I use input type="tel" to display a numeric keyboard. Works just fine on iOS, and the numeric keyboard shows up in Android as well, but it's impossible to close it (no close button and not possible to close by tapping somewhere else) and hence not possible to leave the page as the footer menu isn't visible. A white box appears in upper left corner, and the header (with back button) disappears:

Numeric keyboard

Html for this:

<ul data-role="listview" data-inset="true">
   <li >
      <div class="ui-grid-a">
         <div class="ui-block-a setta">
            <label for="ordersdaygoal" class="i18n-settings_orders-daygoal-label">Per day: </label>
         </div>
         <div class="ui-block-b settb">
            <input type="tel" name="ordersdaygoal" id="ordersdaygoal" value="0" mini="true" style="width: 150px;" maxlength="9" /> 
         </div>
      </div>
   </li>
...
</ul>

Any suggestions to solve these Android mysteries?

Upvotes: 0

Views: 4673

Answers (1)

Raanan
Raanan

Reputation: 4775

I can only help you with your first question, we used this jquery plugin for date, it's highly configurable: https://github.com/jtsage/jquery-mobile-datebox

Upvotes: 2

Related Questions