Держите select2 открытым только при выборе Shift
Я использую 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, у вас есть два варианта.
Возможно, вы не знаете, но select2, похоже, выполняет аналогичную функцию; он проверяет, удерживается ли управляющий ключ.
Посмотрим select2.js и поищем // Don't close if the control key is being held.
Я думаю, что легко изменить эту часть плагина напрямую, а не реализовывать его самостоятельно.
(Я не смог найти способ перезаписать функцию.)
Впрочем, я тоже нашел способ.
Но, может быть, иногда не удается предотвратить закрытие select2 ...
Во-первых, вам нужно событие keydown и keyup во 2 части.
// 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.
// 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 все еще существует. Например.
ОБНОВЛЕНО
Добавьте логику с учетом «Если его несколько» и «Если его нет». Так, на всякий случай.
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;
}
}
}
}
Ха, действительно работает! Проблема заключалась в том, что у меня есть несколько select2, к которым я хочу применить его, и работает только первый. Позже я попробовал несколько случайных. Как я могу применить один и тот же трюк со сдвигом к каждому выбору определенного класса? Еще раз спасибо!
Я обновил ваш jsfiddle :) Как мне заставить его работать на них обоих? И в том смысле, что это только select2 того же класса, поскольку будут другие поля select2, на которые это не должно влиять.
Я также получаю сообщение document.getElementsByClassName(...)[0] is undefine на страницах, где нет select2. Есть ли способ применить его, только если они существуют?
Извините за рассылку спама, но я сделал то, что вы сказали, и изменил исходный код на if (originalEvent && (originalEvent.ctrlKey || originalEvent.shiftKey) ), и он отлично работает! Когда я думаю об этом, не имеет значения, применимо ли это к каждому select2. Еще раз спасибо!
Если несколько, вам нужна та же логика, например document.getElementsByClassName (...) [1] ... (это то же самое, что и $ (". Class")). Во всяком случае, похоже, что лучше всего сменить плагин. Я рада, что смогла помочь!
На всякий случай обновил свой ответ и URL-адрес jsfiddle.
Спасибо! Как вы думаете, из-за того, что события select2 произошли до jQuery, он не работал с использованием jQuery? Я был в подобной ситуации раньше.
Я просто понимаю, что jQuery's key event работает, пока не добавлю пункт. Я проверил событие keydown с помощью инструмента разработчика. и заметил, что событие было удалено, когда я добавлял элемент. Однако я не знаю, почему обычное событие javascript может избежать удаления.
Это выглядит многообещающе! Спасибо! Я получил это сообщение
TypeError: document.getElementsByClassName(...)[0] is undefined. Я попытался поместить его вwindow.onload = function(), и сообщение исчезло, но, похоже, оно не срабатывает для select2. У меня также естьReferenceError: isShiftDown is not defined, который исчез после добавленияvar isShiftDown = false;вверху. Есть ли что-нибудь, что мне нужно подумать с точки зрения порядка всего этого? Спасибо!