HTML 下拉菜单未选择 iPhone 的 IOS 13 中的选项
HTML Drop Down not selecting options in iPhone's IOS 13
我实现了一个 Web 应用程序,它有一个下拉菜单(即 HTML Select)。如果我尝试 select 下拉列表中的任何选项,它不会触发更改事件,但会成功更新标签文本。
- 设备:iPhone11 或最新版本
- OS: IOS 13 或最新版本
- 浏览器:Safari
示例代码:
<select id="storagetype">
<option value="" selected>Select Storage Type</option>
<option value="1" selected>ABC</option>
<option value="2" selected>XYZ</option>
</select>
JavaScript:
var storagetype = document.getElementById("storagetype");
storagetype.addEventListener("change", function() {
alert(storagetype.value)
});
如果我在 IOS 12.X 或更低版本中尝试相同,它会按预期工作。
此外,没有控制台错误,我尝试了 z-index 样式。但是没有任何效果。
在下面的代码中添加过滤器来检测 iphone 然后使用它。
Javascript:
document.addEventListener('click', function (params) {
document.querySelectorAll('li[id^="select-options"]').forEach(ele => {
ele.addEventListener('touchend', (e) => {
e.stopPropagation();
})
});
});
Jquery:
$(document).click(function(){
$('li[id^="select-options"]').on('touchend', function (e) {
e.stopPropagation();
});
});
我实现了一个 Web 应用程序,它有一个下拉菜单(即 HTML Select)。如果我尝试 select 下拉列表中的任何选项,它不会触发更改事件,但会成功更新标签文本。
- 设备:iPhone11 或最新版本
- OS: IOS 13 或最新版本
- 浏览器:Safari
示例代码:
<select id="storagetype">
<option value="" selected>Select Storage Type</option>
<option value="1" selected>ABC</option>
<option value="2" selected>XYZ</option>
</select>
JavaScript:
var storagetype = document.getElementById("storagetype");
storagetype.addEventListener("change", function() {
alert(storagetype.value)
});
如果我在 IOS 12.X 或更低版本中尝试相同,它会按预期工作。
此外,没有控制台错误,我尝试了 z-index 样式。但是没有任何效果。
在下面的代码中添加过滤器来检测 iphone 然后使用它。
Javascript:
document.addEventListener('click', function (params) {
document.querySelectorAll('li[id^="select-options"]').forEach(ele => {
ele.addEventListener('touchend', (e) => {
e.stopPropagation();
})
});
});
Jquery:
$(document).click(function(){
$('li[id^="select-options"]').on('touchend', function (e) {
e.stopPropagation();
});
});