在 Select2 v3 上選擇值后隱藏虛擬鍵盤

Question

我僅將 select2 v.3.4.5 用於我的項目。 目前，在手機上查看時，打開並選擇值后鍵盤不會關閉，我想關閉它。 我只想在用戶專注於它並輸入內容時打開。

 $(document).ready(function() { $('#Salutation,#Gender').select2() .on('change select-open', function(e) { setTimeout(function() { $('.select2-input').blur(); }, 500); }); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-4 col-xs-offset-4"> <h3>Application Form</h3> <form class="form" action="/action_page.php"> <div class="form-group"> <label for="GivenName">Given Name:</label> <input class="form-control" type="text" id="GivenName"> </div> <div class="form-group"> <label for="Surname">Surname:</label> <input class="form-control" type="text" id="Surname"> </div> <div class="form-group"> <label for="Salutation">Salutation:</label> <select class="" name="" id="Salutation"> <option value="Mrs">Mrs</option> <option value="Mr">Mr</option> <option value="Miss">Miss</option> </select> </div> <div class="form-group"> <label for="Gender">Gender:</label> <select class="" name="" id="Gender"> <option value="Female">Female</option> <option value="Male">Male</option> <option value="Transgender">Transgender</option> </select> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div>

作為這個js

    $('#Salutation,#Gender').select2()
    .on('change select2-open',function(e){
        setTimeout(function(){
            $('.select2-input').blur();
        }, 500);
    });

我已經將輸入搜索框設置為模糊，但鍵盤沒有關閉。

我該怎么做才能存檔這個目的？ 請幫助。 謝謝。

PS：可以理解，select2 v4 修復了這個錯誤，但我無法升級我的 select2 版本，因為我的項目完全依賴 v3。*

Answer 1

確保搜索框不會自動對焦

在 Select2 中沒有辦法做到這一點 - 每當您嘗試在此輸入上調用blur()函數時，它只會重新聚焦它。

但是，通過監聽open事件，我們可以用我們自己的搜索框替換搜索框，它不會自動對焦。 只有當前活動的搜索框有select2-focused類，所以我們使用它來查找它，然后創建一個新的搜索框（使用相同的select2-input類，因此它保留相同的外觀），然后重新 -自己實現搜索功能，最后將其插入到 DOM 中，並刪除舊的搜索框。

關閉選擇彈出窗口后不顯示鍵盤

Select2 似乎嘗試以一種非常奇怪的方式實現它自己的blur()事件（參見此處）。

因此，與其嘗試使用它，不如利用 CSS 選擇器。 CSS 中的:focus選擇器選擇任何有焦點的東西。 由於 Select2 實際上並沒有添加任何新的 DOM 元素（即一旦在 HTML 中，它就會變成標准的<div>元素、 <input>元素等），我們可以找到具有焦點的那個，並成功地對其調用模糊。

因此，通過調用$(":focus").blur() ，我們找到當前具有焦點的 DOM 元素，並對其進行模糊處理。

此外，通過使用select2-close作為我們的事件，而不是change ，即使用戶沒有選擇一個項目，鍵盤也不會打開，而是在它外面點擊。

---

我已經對其進行了測試，它在運行 iOS 11 的 iPad 上確實對我有用。這是最終的工作代碼：

 $(document).ready(function() { $("#Salutation,#Gender").select2().on("select2-open",()=>{ let oldSearchBox = $(".select2-focused")[0]; //Get the current search box let parent = oldSearchBox.parentNode; //The parent of the search box (ie the element that holds it) let search = document.createElement("input"); //Create a new input box search.classList.add("select2-input"); //Make it look like the old one search.addEventListener("keyup", ()=>{ //Whenever someone releases a key, filter the results let results = parent.parentNode.getElementsByClassName("select2-result"); //Get all of the select box options let query = search.value.toLowerCase(); //Get what the user has typed (in lower case so search is case-insensitive) for (let result of results) { //Loop through all of the select box options let resultText = result.children[0].childNodes[1].nodeValue.toLowerCase(); //Get the text for that option (also in lower case) result.style.display = (resultText.indexOf(query)==-1) ? "none" : "block"; //If the result text contains the search, it is displayed, otherwise it is hidden } }) parent.appendChild(search); //Add the new search box to the page oldSearchBox.remove(); //Remove the old one }); $("#Salutation,#Gender").select2().on("select2-close",()=>{ setTimeout(()=>{ $(":focus").blur(); }, 50); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-4 col-xs-offset-4"> <h3>Application Form</h3> <form class="form" action="/action_page.php"> <div class="form-group"> <label for="GivenName">Given Name:</label> <input class="form-control" type="text" id="GivenName"> </div> <div class="form-group"> <label for="Surname">Surname:</label> <input class="form-control" type="text" id="Surname"> </div> <div class="form-group"> <label for="Salutation">Salutation:</label> <select class="" name="" id="Salutation"> <option value="Mrs">Mrs</option> <option value="Mr">Mr</option> <option value="Miss">Miss</option> </select> </div> <div class="form-group"> <label for="Gender">Gender:</label> <select class="" name="" id="Gender"> <option value="Female">Female</option> <option value="Male">Male</option> <option value="Transgender">Transgender</option> </select> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div>

Answer 2

我有一個替代的工作，我已經使用了大約一個星期了。 到目前為止，它似乎在我嘗試過的所有 android 和 ios 設備上都運行良好。 我在'multiple'設置為false（即'single'類型）的select2實例上使用它。 在這種情況下，我希望用戶進行單個選擇，並且鍵盤應該消失。

簡而言之，在 select2-close 事件期間，您設置了一個標志，指示您要禁用 select2-focusser 接收的任何焦點事件。 當焦點事件被觸發時，你檢查標志是否被設置，如果是，你只需將焦點移動到另一個目標。 我將該標志添加為數據屬性，並在使用 setTimeOut 一秒后重置該標志。

這是有效的，因為 select2 關閉處理程序被分成 2 部分，並且 'select2-close' 事件在第 1 部分結束時（在第 2 部分之前）被觸發。 第 1 部分是“抽象”關閉處理程序，它實際上關閉選擇對話框，並設置控件的值。 第 2 部分是“單個”關閉處理程序，它實際上只是導致 select2 重新聚焦於自身（這就是問題所在！）。

對我來說，我在我的導航欄按鈕之一中添加了一個“.focus-bait”類，我用它來在聚焦器的焦點事件執行期間轉移焦點。 如果您在使此重新聚焦步驟起作用時遇到問題，請嘗試不同的元素（我遇到了問題，使其在我為聚焦而制作的按鈕上起作用。我仍然不確定為什么，但我沒有進行更多調查，因為我的導航按鈕解決方案非常適合我的需求）。

$('body').on('focus','.select2-focusser', function(e) { 
    let isDisabled = $(this).parent().first().data("disable-focus");
    if (isDisabled) {
        console.log('Focusser: focus event aborted');
       $('.focus-bait').focus();
    }   
});

//select2_focus_ctrl is a class that I add to any select2 container
//that I wish to use this focus logic e.g. add it to #Salutation,#Gender
$('body').on('select2-close','select2_focus_ctrl', function(e) {
    console.log('Focusser: disabling focus event');
    if ($(this).data('select2').opts.multiple != true) {
        $(this).prev().data("disable-focus",true);
        setTimeout(function() { 
            console.log('Focusser: enabling focusser');
            $(this).prev().data("disable-focus",false);
        }, 1000);               
    }
});

這是一個完整的代碼片段。 在編寫它時，我注意到如果 select2 容器來自“select”元素，則“multiple”屬性不存在（我使用的是“div”），因此我更改了一行代碼： .opts.multiple != true （而不是== false ）。

 $(document).ready(function() { $('#Salutation').select2( ); $('body').on('focus','.select2-focusser', function(e) { let isDisabled = $(this).parent().first().data("disable-focus"); if (isDisabled) { console.log('Focusser: focus event aborted'); $('.focus-bait').focus(); } }); $('body').on('select2-close','.select2_focus_ctrl', function(e) { console.log('Focusser: disabling focus event'); if ($(this).data('select2').opts.multiple != true) { $(this).prev().data("disable-focus",true); setTimeout(function() { console.log('Focusser: enabling focusser'); $(this).prev().data("disable-focus",false); }, 1000); } }); $('body').on('change','#Salutation', function(e) { let theVal = $('#Salutation').select2("val"); $('#currentVal').val(theVal); }); });

 body { background: #dddddd; padding: 20px; font-family: Helvetica; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; cursor: pointer; } button:focus { background: #fff; color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.js"></script> <button type="button" class="focus-bait"> Just the bait! </button> <br> <div> <input id="currentVal" style="height:20px;width:150px"/> </div> <br><br> <select class="select2_focus_ctrl" id="Salutation" style="width:200px;"> <option value="Mrs">Mrs</option> <option value="Mr">Mr</option> <option value="Miss">Miss</option> <option value="Esquire">Esquire</option> <option value="Other Options">Other Options</option> <option value="Just for interest">Interesting longer item</option> </select>