在Select2关闭事件触发后聚焦输入

时间:2014-06-24 04:57:45

标签: javascript jquery jquery-select2

我看了always trigger "change"-event for <select>, even if the select2-option clicked is already selected,因为问题与我的问题非常接近,我在那里问我的问题,但没有提供答案。我的问题是我有一个由Select2构造的选择框和一个文本输入。我想要实现的是 Select2关闭(无论值是否改变)我的文本输入变为焦点

所以我做了一些逻辑上很好的事情如下:

$('#select').select2({placeholder: 'City'});
$('#select')
.on('select2-close', function (e) {
   $('#hey').focus();
});

http://jsfiddle.net/sobhanattar/x49F2/8/

如您所见,文本输入不接受焦点。在对Select2文档进行一些挖掘并检查文档的事件部分后,我意识到在Close事件之后,会自动触发Focus事件。这意味着在关闭Select2选择框后,它会自动聚焦。所以我把我的代码更改为:

$('#select').select2({placeholder: 'City'});
$('#select')
.on('select2-close', function (e) {
       $('#select').blur();
})
.on('select2-blur', function(e) {
      $('#hey').focus();
});

它运作得很好。现在我想知道我对Select2事件顺序的理解是正确的,或者我错过了中间的东西。

3 个答案:

答案 0 :(得分:5)

看看这里,这个问题已经有了答案: Blur select2 input after close

.on("select2-close", function () {
    setTimeout(function() {
        $('.select2-container-active').removeClass('select2-container-active');
        $(':focus').blur();
        $("#elementid").focus();
    }, 1);
});

elementid是您想要在select2 closese之后关注的id元素。 我刚刚在链接的答案中添加了$("#elementid").focus();

答案 1 :(得分:0)

使用css:

html, body {
    height:100%
}

答案 2 :(得分:0)

尝试以下一项:

$('#select2').on('select2:close', function (e)
{
   // your focus code for element
});