seokirill30 окт 2016 в 18:51

Select / Multiselect без JS

4 мин

20K

CSS * HTML * Занимательные задачкиКлиентская оптимизация * Спортивное программирование *

Комментарии 19

boodda 30 окт 2016 в 19:41

Пример на JS fiddle как то совсем плохо работает под хромом. Выбирает далеко не с первого раза и даже не со второго.

seokirill 30 окт 2016 в 20:25

Скорее всего, медленно нажимаешь мышкой.
Поиграйся, настрой побольше задержку или шустрей тыкай пальцем.
За время задержки ты должен успеть нажать на кнопку и поднять палец, так сказать, совершить полный цикл клика.

Akdmeh 30 окт 2016 в 21:03

Извините, у меня не сработало (Chrome, тачпад). Так и представил, что пишу пользователю:
«Если не выбрался select — попытайтесь шустрей тыкать пальцем».
Попытался несколько раз.
Сама идея очень интересная, но нерабочая…

seokirill 30 окт 2016 в 21:19

Это proof-of-concept, настройте под ваши нужды.
Вынес задержку в отдельную переменную, чтоб вам было проще.
https://jsfiddle.net/2k1pvbyt/2/

WebSpider 30 окт 2016 в 22:44

У меня в FF вообще не работает

seokirill 31 окт 2016 в 07:43

Работает во всех браузерах (кроме servo, он так и не открыл страницу). В том числе на андроиде, на винде.
Если не успеваете — поиграйтесь с задержкой.

PaulZi 30 окт 2016 в 22:01

Троллейбус из буханки хлеба.png

Во-первых, под последним firefox ни один пример не работает.
Во-вторых, не могу проверить, у вас с клавиатуры список управляется?
В-третьих, если и что-то вдруг сломалось в JS (что само по себе очень плохая и редкая ситуация), то обычно пользователю просто дают нестилизованный select. Без js уже мало какой из сайтов будет полноценно работать, так что кто его отключил — пусть «страдает» стандартным селектом)

vintage 31 окт 2016 в 03:13

Нужно убрать инпут и сделать сам дропдаун фокусируемым: https://jsfiddle.net/crh70ux0/1/

vintage 31 окт 2016 в 03:17

Ну и высоту списка лучше ограничить размерами экрана, а не константой в пикселях: https://jsfiddle.net/crh70ux0/2/

seokirill 31 окт 2016 в 06:43

Улучшать можно бесконечно, цель была — попробовать концепт.

vintage 31 окт 2016 в 07:09

Попробовать концепт можно и у себя локально. Вы статью с какой целью опубликовали?

seokirill 31 окт 2016 в 07:41

Потому, что это интересно — сделать без JS то, что без него не делают. Показать, на что способен CSS.
По той же причине, по которой люди восхищаются статьями типа «вам не нужен js для этого» и подобными.

vintage 31 окт 2016 в 07:53

Ту и костыли не нужны с анимациями и фейковыми инпутами

ganqqwerty 31 окт 2016 в 08:14

Комментарий немного в сторону. Каждый раз когда выходит новый фреймворк, сердце обливается кровью — кто ж под него сделает хороший multiselect с autocompletion'ом, да так чтобы поддерживал ajax, группировку опций, кастомные шаблоны для опций и вот это все, что было в ui-select.

zxcabs 31 окт 2016 в 09:12

У меня под последним хромом с тачпада не заработало.
И еще из замечаний, почему в конструктор передается id а не сразу нода? Я вот идишниками уже пару лет не пользуюсь