如何解决HTML下拉菜单未在iPhone的IOS 13中选择选项
我实现了一个Web应用程序,并且该应用程序有一个下拉菜单(即HTML Select)。如果我尝试在下拉菜单中选择任何选项,则它不会触发更改事件,但会成功更新标签文本。
- 设备:iPhone 11或最新版本
- 操作系统: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();
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。