iOS Safari Mobile禁用上一个和下一个选择输入

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.

基本上我在页面上有多个选择菜单。第一个填充负载,第二个填充确定第一个的选择。很简单。

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.

但是,在iOS设备中,当您点击选择元素时,它会启动iOS滚动条以供您选择。如果有人使用本机iOS上一个或下一个按钮,则以下输入将不会收集先前的选择数据。您必须进行物理点击,然后启动下一个选择菜单,以使填充的结果准确无误。

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.

有一个名为http://m.lemonfree.com的网站会强制您点击已完成而不是上一个/下一个,并且还会阻止您点击iOS选择菜单以关闭选择提示。基本上迫使用户选择完成。

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 个解决方案

#1

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

使用html tabindex =“nubmer”属性(http://www.w3schools.com/tags/att_global_tabindex.asp)

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

要防止下一个/上一个输入或选择使用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):

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

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

我制作了一个模块来解决这个特殊问题。这是GitHub回购,下面是它的实际应用程序。