Отключить автофокус при открытии раскрывающегося списка select2? - PullRequest
Новая
       18

Отключить автофокус при открытии раскрывающегося списка select2?

0 голосов
/ 11 октября 2018

Я пытался отключить автофокус поиска ввода внутри select2, особенно на мобильном телефоне, чтобы отключить всплывающее окно клавиатуры.Однако, как задокументировано здесь :

select2 не будет вызывать собственные события.select2 также не будет запускать не собственные версии событий, что является меньшей проблемой, поскольку у нас все еще есть возможность добавлять собственные события без нарушения совместимости.

Так что единственный способ, которым я могнужно попытаться получить все поля ввода внутри select2, которые в данный момент были сфокусированы, и установить потерю фокуса, но безуспешно. 

$("select").select2().on("select2-open",":input",function(){
    setTimeout(function(){
        $(":focus").blur();
    }, 50);
});

Есть ли какая-либо вероятность, что я смогу достичь такого результата выше?Спасибо.

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Наконец, мне удалось найти решение, которое прекрасно работает для меня, как показано ниже: 

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
    $('.select2-search input, :focus,input').prop('focus',false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard);

$("select").select2().on("select2-close",function(){
    setTimeout(hideSelect2Keyboard, 50);
});

Протестировано на планшете и устройстве iOS.В функции hideSelect2Keyboard() я искал все текущие элементы фокуса, включал поле ввода, которое можно использовать для инициализации select2, устанавливая .prop('focus',false), который удалит фокус и, следовательно, отключит всплывающее окно клавиатуры при событиях select2-open и select2-close путем создания цепочки.blur() - удалить рамку фокуса с элемента.Затем я прикрепил эту функцию для выбора событий open и close, и она работает просто отлично.

Надеюсь, это поможет другим, кто ищет это, как и я тоже.Спасибо.

0 голосов
/ 11 октября 2018

Я думаю, что нашел решение для select v3 - протестировано в v3.5.4.

Мы можем использовать опцию shouldFocusInput, которая должна быть функцией, которая должна возвращать true или false.

Итак, инициализируйте плагин с помощью следующего кода: 

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      return false;
    }
  });
});

Демонстрация Codepen: https://codepen.io/andreivictor/pen/JmNzvb

Если вы хотите отключить автофокус только наДля мобильных устройств мой подход заключается в использовании библиотеки Modernizr, которая может проверять наличие событий Touch в браузере.

Таким образом, полный код должен быть: 

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      if (Modernizr.touch) {
         return false;
      }
      return true;
    }
  });
});
...