在支持apple-mobile-web-app的應用上禁用下拉菜單/ html-select的默認行為失敗

Question

故事：我不想重新發明輪子，但是對於Intranet Web應用程序，我正在為常規輸入字段（特別是下拉菜單字段）開發標准化的工具箱（->在任何OS /瀏覽器上都具有相同的行為！！！） （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中的網絡視圖仍然可以。

對移動Safari Web應用程序模式有何建議？ 謝謝

Answer 1

好，我會回答我自己的問題。

在我放棄尋找這種意外的Safari行為的原因之后，我進行了變通，這對於SELECT元素的CSS樣式也很有用。

我的解決方案是使用包裝DIV，並將SELECT設置為pointer-events:none; 。 到目前為止，在所有操作系統和瀏覽器上，一切正常，包括。 移動Safari和移動Chrome中的網絡應用模式。

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元素，在跨瀏覽器/ OS的情況下看起來相同，純CSS，沒有圖像。

作為我的問題的答案，功能結果是單擊DIV，腳本將內部SELECT元素標識為數據源以及用戶選擇更改的目標。 我每次都可以決定是在HTML輸出之前包裝SELECT元素服務器端，還是使用jquery對其進行包裝。 $('select').wrap('<div class="selectwrapper" />');