自定义组合框焦点不't shift选择elem和eventBubble不't停止.在IE中工作良好，但在

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

本文关键字：IE 工作 停止 但在 elem 焦点 组合 shift 选择 自定义 eventBubble      更新时间：2023-09-26

这里我创建了一个自定义组合框，用户可以通过单击输入文本字段旁边的箭头图像或单击文本字段从下拉列表中选择值。

此代码在IE 11上运行良好。在谷歌浏览器上，当我点击箭头图像时，我可以从下拉列表中选择值。但是当我点击文本字段时，我无法选择值。

在这里，onclick事件被正确地触发，但输入文本（组合框）打开下拉列表，并且焦点不会转移到下拉列表。现在，由于焦点不在下拉菜单上，chrome的行为很奇怪，当我点击它时没有选择该选项。现在，当我试图通过编码到下拉列表来转移焦点时，输入onblur事件被触发，下拉列表关闭。

所以基本上它不会打开。

我在JSFiddle上尝试过，但在IE上无法复制。我建议你使用pastebin链接http://pastebin.com/aGmT0srm并在您的机器上进行测试。

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>

我希望它能在跨浏览器上运行，尤其是在Chrome上。

欢迎任何见解或建议。

谢谢！

但当我点击文本字段时，我无法选择价值观

从<input>中删除onblur="combotext_onblur(vData_30,sel_vData_30)"可修复所述的IE 11、FF 38和Chrome 43问题。

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

您可以通过自定义代码实现这一点，但这相当复杂，因为浏览器兼容性很难照顾到默认表单元素。

最好使用已经测试和维护过的js插件，如：

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

您的代码将更加干净和高效。

相关文章：