3

我正在编写一个小脚本,它将焦点设置到多选 jquery 小部件的过滤器文本输入字段。根据文档,我可以像这样订阅小部件的点击事件:

// bind to event
$("#multiselect").bind("multiselectopen", function(event, ui){
    // event handler here
});

所以我尝试了这个:

$("#MyStatusWidget").bind("multiselectopen", function(event, ui){
            // event handler here
            $(this).$(".ui-multiselect-filter").contents('input :text').focus());
        });

这是小部件的链接: http ://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

我还尝试了其他几种方法($('').is(':text'); 等),但无法解决问题。

这是HTML:

<div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix ui-multiselect-hasfilter">
<div class="ui-multiselect-filter">
Filter:
<input type="search" placeholder="Enter keywords">
</div>
<ul class="ui-helper-reset">
</div>

谢谢

4

4 回答 4

6

我知道这有点旧,但就我而言,我在页面上有很多这些小部件。所以我做了一些不同的东西,效果很好。

$("#MyStatusWidget").multiselect({
    open: function () {
        $(this).multiselect("widget").find("input[type='search']:first").focus();               
    }
});
于 2013-02-06T19:42:01.457 回答
5

创建多选小部件时,只需添加以下“打开”方法。

$("#MyStatusWidget").multiselect({
    open: function () {
        $("input[type='search']:first").focus();                   
    }
});

对于 IE10 浏览器:

$("#MyStatusWidget").multiselect({
    open: function () {
        $("input[type='text']:first").focus();                   
    }
});
于 2012-08-07T20:04:10.867 回答
1

我还没有尝试过前两种解决方案来查看 rrusnak 的问题是否存在。我的解决方案没有任何 rrusnak 提到的其他问题。这个可以在页面上使用无限数量的选择器,并使用简单的 jQuery 以及 Eric Hynds 建议将他的多选过滤器系统实现到多选小部件:

$("#MyStatusWidget").multiselect({
open: function () {
  $(this).multiselectfilter("widget").find('input').focus();
  }
  }).multiselectfilter({
  label: '',
  autoReset: true
});

它干净,可以与其他小部件选项链接,并立即允许文本输入,而无需先单击输入过滤器。

IMO Eric 应该在他的过滤器脚本中包含一个自动焦点 - 因为在小部件上使用过滤器意味着无论如何都要使用它。因此,必须手动关注输入字段对于用户来说是不必要的点击。

于 2014-05-04T17:52:37.457 回答
0

以上两个答案对我有用,但是当过滤器聚焦时,插件会发生一些令人讨厌的事情。最值得注意的是,您不能再使用箭头键来选择一个选项,这确实会剥夺键盘控制权。

我已经实现了一些更改,您可以在下面的 github 链接中找到这些更改。

  1. 修复表单的选项卡问题
  2. 允许在选择过滤器时使用箭头键选择选项
  3. 我已将遍历功能更改为对过滤列表友好。
  4. 我已更改遍历功能,以便在使用向上箭头时一次向上移动一个选择(而不是转到列表顶部)
  5. 按“f”(或“ctrl-f”)将重新聚焦在过滤器框上

希望这可以帮助任何与我有相同问题的人。更改在常规多选以及过滤器 src 文件中。

https://github.com/rrusnak1/jquery-ui-multiselect-widget

于 2013-07-08T16:36:15.450 回答