jQuery焦点在使用插件chosen时无法工作

Question

我正在使用一个jQuery插件chosen（http://harvesthq.github.com/chosen/），用于创建更有用的选择框。

然而，该插件无法与jQuery焦点事件一起使用。

我的html代码：

可能是重复问题：
Jquery Chosen focus on page load (onLoad?)

<select class="product">
<option value="1">Product One</option>
<option value="2">Product Two</option>
</select>

和 JavaScript 代码：

$('.product').chosen().focus();

无法聚焦元素..

这是我的 jsFiddle: http://jsfiddle.net/JigneshManek/queZ6/11/

插件中是否有其他方法或事件可用于聚焦元素?

- user617447

Answer 1

这个库看起来不错，但似乎除了设置初始参数外，它并不允许你与之进行接口交互。

不过，还是试试这个：

$('.chzn-single').focus(function(e){
    e.preventDefault();
});
$('button').click(function() {
    $('.chzn-single').focus();
});

发生的情况是，通过按下Tab键来聚焦于($('.chzn-single'))元素，该元素是一个a元素。Chosen监听到该事件并触发字段的激活以及容器的聚焦。我需要在单击事件上添加preventDefault以便让焦点停留在容器上。

无论如何，这似乎都能正常工作。

- ori

Answer 2

以下是我尝试过的解决方案：

$('.chzn-container').mousedown();

- sheerun

---

-1：这不仅仅是将元素聚焦。它还会打开元素中的选项。这与在选择输入上进行聚焦的操作不同。 - Adrian Grigore

Answer 3

问题在于您的原始选择框不再存在，已被一个<div>和一些<ul>所取代，因此标准浏览器行为中对输入控件的focus不再相关。您需要查看库，并了解如何捕获keydown事件以创建虚拟焦点。如果您很幸运，库的作者已经考虑到了这一点，并为您提供了一些钩子。

- Jason

Answer 4

这个话题已经有近一年的历史了，但是对于可能需要它的人：

为了在从下拉菜单选择元素后重新聚焦到字段，我编辑了选定的源代码： 在函数 *Chosen.prototype.choice_build = function(item) {* 中添加了

this.container_mousedown();

这是一种肮脏的黑客和部分解决方案，用于实现重新聚焦，但在插件的v.0.9.8上似乎对我有效。如果有人能提供更好的解决方案 - 我将很乐意采纳。

- zergussino