IT и около

Как убрать мерцающий курсор в Selectize.js

пост
22 Октября 2016

Столкнулся с проблемой:

Для оформления селектов я использую selectize.js (https://github.com/selectize/selectize.js). В верстке он заменяет селект на инпут и выпадающий список. В инпуте появляется мигающий курсор, который захотелось убрать.
В интернете нашел такое решение:

$('.selectize-input > input').prop('disabled', 'disabled');

Мы просто дисаблим интуп селектайза. В хроме все работает отлично, но в ходе теста выяснил, что в свежем фаерфоксе selectize.js не реагирует по клик по самому задисабленному инпуту. Поэтому вот мое решение:

$('select').selectize({
onDropdownOpen: function() {if (navigator.userAgent.indexOf("Firefox") != -1){ $('.selectize-input > input').prop("disabled", true); }},
onDropdownClose: function() {if (navigator.userAgent.indexOf("Firefox") != -1){ $('.selectize-input > input').prop("disabled", false); } }
});

Что мы сделали: когда наш псевдоселект неактивен, инпут отображается как обычно и правильно обрабатывает событие клика; как только мы открыли меню, мы дисаблим инпут и нас не раздражает мерцающий курсор.

if (navigator.userAgent.indexOf("Firefox") != -1){ } else { $('.selectize-input > input').prop('disabled', 'disabled'); }

и для остальных браузеров оставляем поведение по-умолчанию.

js верстка
Добро пожаловать!
Имя пользователя
Заполните поле
Пароль
Заполните поле