上周五我发现了关于此问题的类似问题,但似乎无法再次找到它。如果有人能指出我正确的方向,那就太好了。
本质上我在一个页面上有多个选择菜单。第一个在加载时填充,第二个在第一个选择时填充。够简单的。
但是,在 iOS 设备中,当您点击选择元素时,它会启动 iOS 滚动条供您进行选择。如果有人使用原生iOSprevious
or next
按钮,如下<select>
输入不会收集之前的选择数据。你必须用身体敲击done
然后启动下一个选择菜单以使填充的结果准确。
有一个网站叫http://m.lemonfree.com http://m.lemonfree.com这迫使你点击done
而不是prev/next
,并且还会阻止您点击 iOS 选择菜单来关闭选择提示。本质上是强迫用户选择done
.
我非常有兴趣了解他们如何实现此功能。
Cheers!
这是我的代码以防万一:
<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);
}
});
});
使用htmltabindex="nubmer"
属性 (http://www.w3schools.com/tags/att_global_tabindex.asp http://www.w3schools.com/tags/att_global_tabindex.asp)
防止输入下一个/上一个或选择使用tabindex="-1"
:
<input tabindex="-1" />
UPD: 我查过了http://m.lemonfree.com/ 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;
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)