iOS Safari Mobile禁用上一个和下一个selectinput
上周五我发现了类似的问题，但似乎再也找不到了。 如果有人能够朝正确的方向捅我，这将是伟大的。
基本上，我有一个页面上的多个select菜单。 第一个填充负载，第二个填充确定第一个的select。 很简单。
但是，在iOS设备上，当您点击select元素时，会启动iOS滚动条以供您select。 如果有人使用本机iOS previous或nextbutton，则以下<select>input将不会收集以前的select数据。 您必须done点击done然后启动下一个select菜单为填充的结果是准确的。
有一个名为http://m.lemonfree.com的网站，强制你点击done而不是prev/next ，也可以阻止你从iOSselect菜单closuresselect提示。 基本上迫使用户selectdone 。
我会非常有兴趣了解他们如何实现这一function。
干杯!
这是我的代码，以防万一：
<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"> Submit </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); } }); });
使用html tabindex="nubmer"属性（ http://www.w3schools.com/tags/att_global_tabindex.asp ）
要防止下一个/上一个input或select使用tabindex="-1" ：
<input tabindex="-1" />
UPD ：我已经检查过http://m.lemonfree.com/脚本，并且没有发现任何有关这个表单的神奇function，请参阅下面的代码，这就是他们所有的（所以只是尝试使用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; } });
我做了一个模块来解决这个特殊的问题。 这里是GitHub回购 ，下面是它在行动的一个GIF。
