將 select2 與 jQuery 虛擬鍵盤一起使用？

Question

我想知道是否有任何方法可以使用 jQuery 虛擬鍵盤輸入 Select2 選擇欄。

因為當您單擊離開 Select2 組件時，下拉菜單會自動關閉。 這不允許您使用任何基於網絡的虛擬鍵盤。

如果您有任何想法，感謝您的幫助！

Answer 1

呸，這需要一段時間！ 我為你做了一個准系統演示。 只需單擊選擇，就會彈出一個鍵盤。

這里的技巧是，在用戶點擊 select 之前， DOM 中不存在 select2 搜索輸入，所以我們使用select2:open事件在 select2 文本輸入附加到 DOM 后找到它，然后附加 jquery 虛擬鍵盤給它。

 // Make the Select2 select $('#sel').select2({ dropdownCssClass: 'keyboard_target_wrapper' }); // We don't want to accidentally make multiple virtual keyboards let kb_bound = false; // Wait until the Select2 select is opened // as the Select2 select input element // might not be in the DOM yet $('#sel').on('select2:open', function (e) { // Save the search input query let $select2SearchInput = $('.keyboard_target_wrapper') .find('.select2-search__field') // If we already have an initialized virtual keyboard // we just return it if(kb_bound) { $('.keyboard_target_wrapper') .find('.select2-search__field') .getkeyboard(); return; } // Create the virtual keyboard $select2SearchInput.keyboard({ openOn: 'focus', appendLocally: false, // Append to body appendTo: 'body', usePreview: false, // Hide the text preview on the keyboard reposition: true, // Make keyboard react to viewport changes layout: 'qwerty', css: { container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix', popup: '' }, stopAtEnd: true, resetDefault: false, beforeInsert: function(e, keyboard, el, str) { // Must trigger keyup event on the Select2 // search input manually, because // the virtual keyboard doesn't do it $select2SearchInput.keyup(); // Just return the input text normally return str; }, }); kb_bound = true; });

 <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.4/css/keyboard.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.4/js/jquery.keyboard.min.js"></script> <select id="sel"> <option value="Cat">Cat</option> <option value="Dog">Dog</option> <option value="Bird">Bird</option> <option value="Fish">Fish</option> <option value="Dinosaur">Dinosaur</option> </select>