Question

我正在使用大致具有以下结构的自定义SELECT组件（psuedoish示例）。

<span>
  <select onclick=chooseAnOptionAndCloseSelect>
    <option>
      .
      .
    <option>
  </select>
  <input onclick=displaySelectAndOptions onchange=filterOptionsAccordingTheInput />
</span>

因此，单击INPUT将打开内置OPTION的自定义SELECT组件我根据输入字段的值来过滤显示的选项。

在键入值时，焦点自然是输入。过滤一些选项后，我想点击其中一个。 问题是，Firefox需要两次点击，首先显然会再次关注选择元素（焦点在于输入）并且只有第二次点击才能获得所需的结果触发select上的onclick事件（传递选项索引）。

在IE上，这可以正常工作，单击过滤就足以在过滤值后进行选择。

我无法使用焦点重定向，因为我不想打扰用户。也就是说，只要用户喜欢，焦点就需要留在输入上，这样他/她就可以将这些值过滤到他们心中的内容。

可以巧妙地使用JS / jQuery侦听器或单击一下就可以实现双击吗？任何想法都赞赏。

更新
我在以下方法方面取得了一些进展（嵌套在onfocus中的mouseup）：

$(function() { // <- document.ready
    $('select[data-filtered=true]').on('focus', function(evt) { // <- onfocus
        $(this).mouseup(function(evt) { // <- Find out that it  was a mouse click
            // This is the problematic part.
            // I need to find out somehow which <option> to mark as selected
            $(this).children().get(X).selected = true; // <- children are the <options>
            $(this).click(); // <- trigger a normal onclick handler 
        });
    });
});

因此，在onfocus事件期间鼠标结束的<option>应标记为selected = true。有什么建议？提取鼠标坐标后跟更多嵌套事件呢？

Answer 1

猜猜我在上次更新后相当接近：P，用下面的代码解决。

$(function() {
    $('select[data-filtered=true]').on('focus', function(evt) {
        $(this).mouseup(function(evt) { 
            evt.target.selected = true;
            $(this).click();
        });
    });
});

这有效地执行了第二次鼠标点击，否则在我的情况下将需要用户点击。

添加内联版本（我需要使用JSF）：

onfocus="$(this).mouseup(function(evt) {evt.target.selected = true;$(this).click();});"

HTML <select>焦点问题：Firefox需要2次点击才能选择<option> </option> </select>

1 个答案: