自定义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