iOS Safari Mobile disable previous & next for select input

I had found a similar question regarding this problem last Friday, but cant seem to find it again. If someone could poke me in the right direction, that would be great.

Essentially I have multiple select menu’s on a page. The first populates on load, the second populates determining on the selection of the first. Simple enough.

  • IOS devices issues with HTML form input (type = text)
  • Display flaw with HTML input type number on iPhone iOS/Safari
  • Display HTML text in UILabel iphone
  • What are the limitations of HTML5 audio on Android and iOS?
  • Is it possible to track click throughs from iPhone Smart Banner
  • Disable iOS Overscroll but allow body scrolling
  • However, in iOS devices, when you tap on the select element, it launches the iOS scroller for you to make a selection. If someone uses the native iOS previous or next buttons, the following <select> input will not collect the previous selection data. You have to physically tap done then launch the next select menu for the populated results to be accurate.

    There is a website called http://m.lemonfree.com which forces you to tap done rather than prev/next, and also prevents you from tapping off of the iOS select menu to close the selection prompt. Essentially forcing the user to select done.

    I would be very interested in finding out how they achieved this functionality.

    Cheers!

    Here’s my code just in case:

    <form method="post" action="list.php" class="striped-bg-inverted">
      <p>
        <label for="make">Make</label>
        <select name="make" id="make" required="required">
            <option selected>Select a Make</option>
          <?php foreach ($usedMakes->MakeResult as $MakeResult) { ?>
            <option value="<?php echo $MakeResult->makeId; ?>"><?php echo $MakeResult->makeName; ?></option>
          <?php } ?>
        </select>
      </p>
      <p>
        <label for="model">Model</label>
        <select name="model" id="model" required="required">
          <option value="" selected>Select a Model</option>
        </select>
      </p>
      <p>
        <button name="submit" id="submit">&nbsp;Submit&nbsp;</button>
      </p>
    </form>
    

    My JavaScript:

    $("#make").change(function() {
      var makeId = $(this).val();
      $.ajax({
        url: "process.inc.php?makeId=" + makeId,
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          var list = "";
          for (i = 0 ; i < data.length; i++) {
            var modelId = data[i].ModelResult.modelId;
            var modelName = data[i].ModelResult.modelName;
            list += "<option value=\"" + modelId + "\">" + modelName + "</option>";
          };
          var theSelect = $("#model");
          theSelect.find("option:gt(0)").remove();
          theSelect.append(list);
        }
      });
    });
    

    2 Solutions Collect From Internet About “iOS Safari Mobile disable previous & next for select input”

    Use html tabindex="nubmer" attribute (http://www.w3schools.com/tags/att_global_tabindex.asp)

    To prevent next/previous on input or select use tabindex="-1":

    <input tabindex="-1" />
    

    UPD: I’ve checked http://m.lemonfree.com/ scripts and does not find anything magical about this form, see code below, that’s all they have (So just try to use tabindex):

    $('#PostCode_text').click(function() {
        $('#PostCode_text').val('');
    });
    
    var searchForm = new LemonFree_SearchForm();
    
    $('#Make_select').change(function() {
        searchForm.loadVastModels(this.value, '#Model_select');
    });
    
    
    $('#Search_form').submit(function() {
        if (Validate.isZipCode($('#PostCode_text').val())) {
            return true;
        } else {
            alert('Please enter a 5 digit zip code');
            return false;
        }
    });
    

    I made a module to solve this particular problem. Here is the GitHub repo, and below is a gif of it in action.

    enter image description here