javascript - 仅在 Shift-Select 时保持 select2 打开

Question

我使用 select2 添加标签。有一个选项可以在选择项目时保持选择列表打开(closeOnSelect)，但是只有在选择项目时按下 Shift 键时，如何才能实现这一点呢？尝试将 closeOnSelect 设置为 false 以查看我希望仅在按下 Shift 键时发生的情况。

以下是 API 选项列表:https://select2.org/configuration/options-api

以下是事件列表:https://select2.org/programmatic-control/events

$(".form-control").select2({
    tags: true,
    tokenSeparators: [',', ' '],
    closeOnSelect: true
})
.on('select2:select', function (e) {
    // How can I reach shiftKey here?
    if( e.shiftKey )
    {
        alert('How do I make closeOnSelect: false happen here?');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control" multiple="multiple" style="width: 300px">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Answer 1

我认为你有两个选择。 你可能不知道，select2似乎也有类似的功能；它检查是否按住控制键。 来看看select2.js ，然后搜索//如果按住控制键则不要关闭。 我认为直接修改插件的那部分很容易，而不是自己实现。
(我找不到覆盖该函数的方法。)

不过，我也找到了方法。
但有时可能无法阻止关闭 select2 ...

首先，您需要在第二部分添加 keydown 和 keyup 事件。

// jQuery keydown doesn't work for some reason.(It seems this plugin is a bit tricky.)
// This event is used when the text box has focus.
document.getElementsByClassName('select2-search__field')[0].onkeydown = function(e) {
    if (e.keyCode === 16) {
        isShiftDown = true;
    }
}
document.getElementsByClassName('select2-search__field')[0].onkeyup = function(e) {
    if (e.keyCode === 16) {
        isShiftDown = false;
    }
}

// This event is used when the text box doesn't has focus.
$(window).on("keydown", function(e) {
    if (e.keyCode === 16) {
        isShiftDown = true;
    }
}).on("keyup", function(e) {
    if (e.keyCode === 16) {
        isShiftDown = false;
    }
});

其次，添加结束事件。

// Closing (if you return false in this event, select2 doesn't close.)
.on('select2:closing', function () {
    // To be exact, there's no need to return true.
    return !isShiftDown;
});

当然，即使你实现成功了，Ctrl键的功能仍然存在。
For Example.

已更新
添加逻辑，考虑“如果它是多个”和“如果它不存在”。以防万一。

var inputs = document.getElementsByClassName('select2-search__field');
if (inputs.length > 0) {
    for (var i=0; i<inputs.length; i++) {
        inputs[i].onkeydown = function(e) {
            if (e.keyCode === 16) {
                isShiftDown = true;
            }
        }
        inputs[i].onkeyup = function(e) {
            if (e.keyCode === 16) {
                isShiftDown = false;
            }
        }
    }
}