自定義ComboBox焦點不會切換到選擇elem並且eventBubble不會停止。在IE中工作正常但在其他工作中則不行

[英]Custom ComboBox focus doesn't shift to select elem and eventBubble doesn't stop. Works fine in IE but not on others


Here I have created a custom combobox where user can select values from the dropdown either by clicking on the arrow image given beside the input text field or by clicking on the text field.

在這里,我創建了一個自定義組合框,用戶可以通過單擊輸入文本字段旁邊的箭頭圖像或單擊文本字段來從下拉列表中選擇值。

This code is working fine on IE 11. On Google Chrome, when i click on the arrow image I am able to select the value from the dropdown. But when I click on the text field, I am not able to select the values.

此代碼在IE 11上運行正常。在Google Chrome上,當我點擊箭頭圖像時,我可以從下拉列表中選擇值。但是當我點擊文本字段時,我無法選擇值。

Here the onclick event gets fired properly, but the input text(combo-box) opens the dropdown and the focus doesn't shift to the dropdown. Now as the focus is not there on the dropdown, chrome behaves weirdly and doesn't select the option when I click on it. Now, when I try to shift the focus by coding to the dropdown, then the input onblur event gets fired and the dropdown closes.

這里onclick事件被正確觸發,但輸入文本(組合框)打開下拉列表,焦點不會轉移到下拉列表。現在由於焦點不在下拉列表中,因此chrome表現得非常奇怪,並且在我點擊它時不會選擇該選項。現在,當我嘗試通過編碼將焦點轉移到下拉列表時,輸入的onblur事件將被觸發並且下拉列表將關閉。

So basically it doesn't open.

所以基本上它沒有打開。

I have tried this on JSFiddle but it doesn't replicate on IE. I would suggest you to use pastebin link http://pastebin.com/aGmT0srm and test it on your machine.

我在JSFiddle上嘗試了這個,但它沒有在IE上復制。我建議你使用pastebin鏈接http://pastebin.com/aGmT0srm並在你的機器上測試它。

JSFiddle link

JSFiddle鏈接

<select size="8" name="sel_vData_30" id="sel_vData_30" style="display:none;"        
       onblur="comboselect_onblur(vData_30,this)" 
       onchange="comboselect_onchange(this, vData_30)" 
       onkeyup="comboselect_onkeyup(13, this, vData_30)"        
       onclick="comboselect_onchange(this, vData_30)" >
    <option value=""></option>
    <option value="Office">Office</option>
    <option value="Plant">Plant</option>
    <option value="Sales">Sales</option>
    <option value="Service Technician">Service Technician</option>
    <option value="Transportation">Transportation</option>
</select>

I want this to work on cross browser especially on Chrome.

我希望這可以在跨瀏覽器上工作,特別是在Chrome上。

Any insights or suggestions are welcome.

歡迎任何見解或建議。

Thank you!

謝謝!

2 个解决方案

#1


0  

But when I click on the text field, I am not able to select the values.

但是當我點擊文本字段時,我無法選擇值。

Removing the onblur="combotext_onblur(vData_30,sel_vData_30)" from your <input> fixes the described issue for IE 11, FF 38 and Chrome 43.

中刪除onblur =“combotext_onblur(vData_30,sel_vData_30)”可修復IE 11,FF 38和Chrome 43所描述的問題。

Working fiddle: https://jsfiddle.net/n0369z7j/6/

工作小提琴:https://jsfiddle.net/n0369z7j/6/

#2


0  

You can do this via custom code but it is fairly complex as the browser compatibilities are difficult to take care of for default form elements.

您可以通過自定義代碼執行此操作,但它相當復雜,因為瀏覽器兼容性很難處理默認表單元素。

Its better recommended to use already tested and maintained js plugin like:

最好建議使用已經測試和維護的js插件,如:

http://select2.github.io/examples.html

http://select2.github.io/examples.html

Your code will be much cleaner and efficient.

您的代碼將更加清潔和高效。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/06/24/692403ef2760533356bc10a732f4edc3.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com