Weird auto focusing on Android device

Weird auto focusing on Android device

Hi,

I've got a bit of an issue, and I can't work out whats going on. Basically, I have the following code:

  1. <!-- item advanced settings  -->
  2. <div id="itemAdvancedSettings" data-role="page" data-enhance="false" data-dom-cache="false" data-transition="fade">
  3.     <div class="header" data-role="header" data-position="fixed" data-tap-toggle="false">
  4.             <a href="#" onclick="history.go(-1)" class="toolbar-button" ><img src="./img/back.png" class="header-back-button"></a>
  5.             <img src="./img/header-jcc-logo.png" class="top-logo">
  6.         </div>
  7.         <div id="itemAdvancedData" data-role="content" data-enhance="false">
  8.             <img src="" id="settingImg" />
  9.               <h3>Refine Settings</h3>
  10.               <div>
  11.                   <label class="ui-input-text" for="adv-item-qty">Hours per day</label>
  12.                   <input type="number"  id="adv-hours" step="1" min="1" max="24">
  13.                   <label class="ui-input-text" for="adv-days">Days per year</label>
  14.                   <input type="number"  id="adv-days" step="1" min="1" max="365">
  15.                 <br>
  16.                   <h3 id="this_product_name"></h3>
  17.                   <label class="ui-input-text" for="adv-costperfixture">Cost per fitting</label>
  18.                   <input type="number"  id="adv-costperfixture" step="0.01" min="0" max="500">
  19.                 <br>
  20.                   <h3 id="rival_product_name"></h3>
  21.                   <label class="ui-input-text" for="adv-rival-costperfixture">Cost per Fittings(&pound;)</label>
  22.                   <input type="number"  id="adv-rival-costperfixture"  step="0.01" min="0" max="2000">
  23.                 <label class="ui-input-text" for="adv-rival-lampsperfitting">No. of lamps per fitting</label>
  24.                 <input type="number"  id="adv-rival-lampsperfitting"  step="1" min="0" max="2000">
  25.                 <label class="ui-input-text" for="adv-rival-lampwattage">Lamp wattage (W)</label>
  26.                 <input type="number"  id="adv-rival-lampwattage"  step="1" min="0" max="2000">
  27.                 <label class="ui-input-text" for="adv-rival-ballastlosses">Ballast losses (W)</label>
  28.                 <input type="number"  id="adv-rival-ballastlosses"  step="1" min="0" max="2000">
  29.                 <label class="ui-input-text" for="adv-rival-avglamplife">Average lamp life (hrs)</label>
  30.                 <input type="number"  id="adv-rival-avglamplife" step="1" min="0">
  31.                 <label class="ui-input-text" for="adv-rival-lampfailurerate">Lamp failure rate (%)</label>
  32.                 <input type="number"  id="adv-rival-lampfailurerate" step="1" min="1" max="100">
  33.                 <label class="ui-input-text" for="adv-rival-supplycostperlamp">Lamp supply cost (&pound;)</label>
  34.                 <input type="number"  id="adv-rival-supplycostperlamp" step="0.01" min="0" max="2000">
  35.                 <label class="ui-input-text" for="adv-rival-changecostperlamp">Lamp change cost (&pound;)</label>
  36.                 <input type="number"  id="adv-rival-changecostperlamp" step="0.01" min="0" max="2000">
  37.                 <label class="ui-input-text" for="adv-rival-disposalcostperlamp">Lamp disposal cost (&pound;)</label>
  38.                 <input type="number"  id="adv-rival-disposalcostperlamp" step="0.01" min="0" max="2000">
  39.               </div>
  40.         </div>
  41.         <div class="footer" data-role="footer" data-enhance="false" data-position="fixed" data-tap-toggle="false">
  42.             <div class="bottom-wrapper">
  43.                 <ul>
  44.                     <li class="active"><a href="javascript:void(0);" class="add-product">Products</a></li>
  45.                     <li><a href="javascript:void(0);" class="go-home">Calculator</a></li>
  46.                     <li><a href="javascript:void(0)" class="globalSettingsbutton">Settings</a></li>
  47.                 </ul>
  48.             </div>
  49.         </div>
  50. </div>

Then my JS, to change to this page is:

  1.     $(document).on("tap",'#advanced-btn', function(e) {
  2.         var item = $(this).data('product');
  3.         currently_on = item; // so we can use it in handleInputChange
  4.         var activeProducts = JSON.parse(window.localStorage.getItem('activeProducts'));
  5.             var this_item;
  6.             $.each(activeProducts, function(i,y) {
  7.                 //console.log("Looking for: " + item + " == " + y.name);
  8.                 if (y.name == item) {
  9.                     this_item = y
  10.                 }
  11.             });
  12.             //console.log(this_item);
  13.             $('#rival_product_name').html(rivalnames[this_item.name]);
  14.             $('#this_product_name').html(productnames[this_item.name]);
  15.             $.mobile.navigate( "#itemAdvancedSettings", { });
  16.     });

Now, on my s5 this works as expected. However, on the HTC One... for some reason it auto focuses on adv-costperfixture . I'm absolutly baffled as to why its doing this, as I'm not telling it to focus at all.

Can anyone shed some light?

FWIW, I've tried using .blur() to unfocus it, but that still doesn't fix it :/

TIA

Andy