IOS Safari Mobile отключает предыдущий и следующий для выбора ввода

В прошлую пятницу я нашел аналогичный вопрос по этой проблеме, но, похоже, не нашел его снова. Если кто-то может совать меня в правильном направлении, это будет здорово.

По сути, у меня есть несколько меню выбора на странице. Первое заполняется при загрузке, второе заполняется при выборе первого. Достаточно просто.

Однако, на устройствах iOS, когда вы нажимаете на элемент select, он запускает скроллер iOS для вас, чтобы сделать выбор. Если кто-то использует собственные кнопки iOS previous или next, следующий вход <select> не будет собирать предыдущие данные выбора. Вы должны физически нажать done, а затем запустить следующее меню выбора, чтобы заполненные результаты были точными.

Существует веб-сайт под названием http://m.lemonfree.com, который заставляет вас коснуться done, а не prev/next, а также не позволяет вам нажимать выключения меню выбора iOS, чтобы закрыть приглашение выбора. По сути, заставить пользователя выбрать done.

Мне было бы очень интересно узнать, как они достигли этой функциональности.

Ура!

Здесь мой код на всякий случай:

<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>

Мой 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);
    }
  });
});

Ответ 1

Использовать атрибут html tabindex="nubmer" (http://www.w3schools.com/tags/att_global_tabindex.asp)

Чтобы предотвратить следующее/предыдущее на входе или выберите tabindex="-1":

<input tabindex="-1" />

UPD: я проверил http://m.lemonfree.com/ скрипты и не нашел ничего волшебного в этой форме, см. код ниже, что все, что у них есть (поэтому просто попробуйте использовать 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;
    }
});

Ответ 2

Я создал модуль для решения этой конкретной проблемы. Вот репозиторий GitHub, а ниже - его действие в действии.