上周五我发现了一个关于这个问题的类似问题,但似乎无法再找到它。如果有人能够朝着正确的方向戳我,那就太棒了。
基本上我在页面上有多个选择菜单。第一个填充负载,第二个填充确定第一个选择。很简单。
但是,在iOS设备中,当您点击选择元素时,它会启动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"> 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);
}
});
});
答案 0 :(得分:10)
使用html tabindex="nubmer"
属性(http://www.w3schools.com/tags/att_global_tabindex.asp)
要防止下一个/上一个输入或选择使用tabindex="-1"
:
<input tabindex="-1" />
UPD :我已经检查了http://m.lemonfree.com/脚本并且没有找到任何关于此表单的神奇信息,请参阅下面的代码,这就是他们所拥有的所有内容(所以只需尝试使用{{1} }):
tabindex
答案 1 :(得分:2)
我制作了一个模块来解决这个特殊问题。 Here is the GitHub repo,以下是其中的GIF动作。