Bootstrap Select與JQuery虛擬鍵盤衝突

這是一個很好的選擇。基本上，我特別使用兩個庫來獲得我想要的。引導選擇：Bootstrap Select與JQuery虛擬鍵盤衝突

https://silviomoreto.github.io/bootstrap-select/

和jQuery虛擬鍵盤：

https://mottie.github.io/Keyboard/

（由以防有人的鏈接找到他們自己的東西很有用）

我用bootstral選擇，因爲作爲選擇組出現的查詢數據非常大，因此在其中添加輸入字段實用程序以使其更易於用戶使用。我們還需要一個虛擬鍵盤，這正是我們添加jquery插件的原因。問題是，當我們觸摸選擇輸入並且鍵盤出來時，我們鍵入的任何內容都不會被過濾。也補充道，鍵盤迄今似乎只對常規輸入文本字段

在最簡單的形式工作，這是我使用生成鍵盤以及初始化選擇選擇器代碼：

let virtualK =()=> { 
    $('.buscame') 
      .keyboard({ 
      layout: 'qwerty', 
      position: { 
       of : $(window), 
       my : 'center bottom', 
       at : 'center bottom', 
       at2: 'center bottom' 
      } 
      }) 
      .addTyping(); 
    } 
    $(document).ready(function(){ 
    $('#example').selectpicker({}); 
    $('#Transfer').selectpicker({}); 
    $('#Chofer').selectpicker({}); 
    $('#Transportista').selectpicker({}); 
    $('#localidad').selectpicker({}); 
    $('#Cliente').selectpicker({}); 

    // Initialize the keyboard 
    virtualK(); 
    });

至於選擇標籤，代碼讀取這樣的：

<select name="Transfer" size="1" id="Transfer" class="form-control select-picker buscame" data-live-search="true" required onChange="javascript:OnChangeOperador()">

，我面臨的另一個問題是，如果我試圖通過傳遞.buscame作爲標識符運行JS代碼，然後鍵盤不出現，如果我選擇了一般標識符爲input它的工作原理。引導選擇文件沒有顯示任何方式來添加一個id爲他們自動生成的輸入框，所以這似乎不是一種選擇（如果有人知道否則告訴）

那麼，有沒有人知道的方法使虛擬鍵盤在自定義選擇的內部搜索框上工作？或者如何將ID添加到生成的輸入過濾器字段？

編輯：

我嘗試使用

let virtualK =()=> { 
    $('input[role="textbox"]') 
      .keyboard({ 
      layout: 'qwerty', 
      position: { 
       of : $(window), 
       my : 'center bottom', 
       at : 'center bottom', 
       at2: 'center bottom' 
      } 
      }) 
      .addTyping(); 
    }

但它確實是相同的，虛擬鍵盤打開了，但不管我輸入沒有得到過濾。

我花了一段時間，因爲的jsfiddle和jsbin是搞笑，但這裏是這個問題的娛樂：

https://codepen.io/AlecX4/pen/vJvmLb?editors=0000

來源

2017-08-30 sigillum_conf

添加的jsfiddle /片斷作爲工作示例 – Dekel

@Dekel肯定，讓我寫完它 –

@Dekel加入吧！對不起，花了這麼長時間，陷入了困境。 –

您需要設置相關的輸入值，並觸發的propertychange該輸入是爲了告訴bootstrap-select輸入的值是變化的。

change: function(e, keyboard) { 
    keyboard.$el.val(keyboard.$preview.val()) 
    keyboard.$el.trigger('propertychange')   
    }

這裏有一個更新了自己的codepen：
https://codepen.io/anon/pen/EvGpvz

來源

2017-08-31 11:58:27 Dekel

謝謝德克爾，像一個魅力一樣工作。我正在閱讀有關更改函數及其工作方式的文檔，但我無法看到您是如何與此連接的。我想我會一直盯着定義，直到它有意義。那麼，謝謝你的時間和幫助。 –

讓我知道你不明白哪個/哪部分代碼:) – Dekel

那麼，例如，更改文檔指出，在每次鍵盤交互時調用更改回調，而不管usePreview選項的設置。 usePreview（用於我可以收集的內容）根據哪個輸入字段是打開的（正確的？）鍵盤而改變。$ el指的是鍵盤輸入的jquery對象，所以當你將val設置爲鍵盤時。$ preview.val（）你是將價值改變爲重點投入？我得到的代碼，如果有什麼，我很驚訝你如何設法找到你需要的東西，以幫助我這麼快解決這個問題！ –

Bootstrap Select與JQuery虛擬鍵盤衝突

回答

相關問題