Нажмите в любом месте веб-страницы, чтобы открыть выпадающий список - PullRequest
5 голосов
/ 24 октября 2011

Я создаю веб-страницу, которая будет просматриваться на мобильных устройствах (в частности, Blackberry).У меня есть навигация выпадающего вида реализована как

Возможно ли это вообще?Из того, что я нашел до сих пор, кажется, что невозможно программно открыть раскрывающийся список <select>, но я решил, что я выброшу этот конкретный случай.

1 Ответ

3 голосов
/ 31 декабря 2011

Поскольку невозможно подделать нажатия клавиш с помощью JavaScript (и это справедливо по соображениям безопасности), самым близким является изменение размера элемента <select> (измените его с выпадающего элемента управления на элемент списка и назад).

enter image description here

enter image description here

Демо , Код (чистый JS, без библиотеки)

Когда пользователь выбирает параметр, щелкая (или касаясь) его, обработчик события щелчка «закрывает» поле списка, устанавливая его размер обратно в 1, после чего он преобразуется обратно в обычный выпадающий элемент управления. Я только что проверил это в (немобильном) Chrome, дайте мне знать, работает ли он на Blackberry или нет.

Edit:

Я создал небольшой плагин jQuery, который превращает поведение и настраиваемость в более понятный элемент управления. Я протестировал это на Safari Mobile на iOS 4, и он ведет себя так же, как обычный выпадающий список в этом браузере, за исключением того, что его можно открыть программным способом.

Демо , Код (jQuery 1.7)

Работает так:

$("select").openable({ triggers: $("#trigger") });

Нажатие на любой триггер откроет пользовательский интерфейс выбора.

Я также добавил обработчик для события key up, чтобы перехватить Введите , Esc и Пробел , чтобы «закрыть» окно списка. Это имитирует механизм выбора выпадающего элемента управления в настольных браузерах.

Конечно, в настольном браузере это изменит макет вашей страницы, так как он отличается от собственного выпадающего элемента управления. Для этого вам понадобится CSS-решение (что-то с position: absolute и z-index, вероятно). Но в iOS пользовательский интерфейс выбора не отображается на странице, поэтому это не проблема.

Опять же, не проверял этот плагин на BlackBerry ...

...