在支持apple-mobile-web-app的系统上禁用下拉菜单/ html-select的默认行为失败

Question

故事:我不想重新发明轮子，但是对于一个内部网web应用，我正在开发一个标准化的工具箱(-->在任何操作系统/浏览器上都是一样的行为！)对于常规输入字段，特别是下拉菜单字段(html-selectbox)，由于条目太多，其中的内容列表需要由用户搜索。多达27k个条目的滚动没有任何意义。好吧，这部分运行得很好。

现在的问题是:为了能够点击一个选择框，但用它做其他事情，我正在使用这个函数(我在stackoverflow上的任何地方找到的，抱歉，我现在找不到链接)

$(document).on('mousedown',function(e){
    console.log(e.target.nodeName); // "select" or "option" ?
    var elm = $(e.target);
    if (elm.is('select') || elm.closest('select').length) {
        if (elm.is('select')) var sel = elm;
        else var sel = elm.closest('select');
        e.preventDefault();
        sel.blur();
        window.focus();
        //------ do other things with the select box
    }
});

这完全是跨浏览器稳定的，并使指针(移动设备上的鼠标或触摸)可以访问选择框，同时抑制元素的默认行为。

今天，我已经在主项目中实现了整个脚本。只要我在常规浏览器(桌面和移动浏览器)中打开项目，一切仍然正常，并按预期运行。但一旦通过主屏幕链接将项目作为web应用程序打开，在iOS (实际的iPad)中，该元素的默认行为将再次出现，同时还会出现我自己的默认行为。android chrome中的Web视图仍然可以使用。

对移动safari web应用程序模式有什么建议吗？谢谢

Answer 1

好的，我会回答我自己的问题。

在我放弃它来找出这种意外的Safari行为的原因后，我确实解决了它，事实证明这对SELECT元素的CSS样式也很有用。

我的解决方案是使用包装器DIV，并将SELECT设置为pointer-events:none;。到目前为止，所有的操作系统和浏览器都运行良好，包括。移动Safari和移动Chrome中的web应用程序模式。

javascript函数现在看起来如下所示：

$(document).on('click',function(e){
    var elm = $(e.target);
    if (elm.is('div.selectwrapper')) {
        var sel = elm.find('select'); // --- targeted SELECT element
        // --- other stuff to do with sel
    }
});

我还想提供上面提到的CSS代码：

div.selectwrapper {
    position: relative;
    display: inline;
    font-size: 1em;
    border: 1px #ccc solid;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
    pointer-events: auto;
}

div.selectwrapper::before, div.selectwrapper::after {
    content: ' ';
    position: absolute;
    display: block;
    top: 7px;
    width: 1px;
    height: 24px;
    background-color: #666;
    pointer-events: none;
}

div.selectwrapper::before {
    right: 14px;
    transform: rotate(45deg);
}

div.selectwrapper::after {
    right: 31px;
    transform: rotate(-45deg);
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background: none;
    border:none;
    margin: 0;
    padding: 0;
    color: #555;
    width: 244px;
    height: 38px;
    padding-left: 6px;
    padding-right: 10px;
    border-right: 46px #eee solid;
    pointer-events: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #555;
    font-size: 100%;
}

select:not(*:root) { //------ Safari only hack
    padding-left: 10px; 
}

优化的结果是一个SELECT元素，它在浏览器/操作系统之间看起来是一样的，纯css，没有图像。

作为我问题的答案，函数结果是单击DIV，脚本将内部SELECT元素标识为数据源以及用户选择更改的目标。每次我都可以决定是在HTML输出之前包装选择元素，还是使用jquery包装它。$('select').wrap('<div class="selectwrapper" />');