Не так давно у меня кончилось терпение.
Сначала начинают «заставлять» всякие плагины, а потом и различные фреймворки.
HTML-документ .
Чтобы понять, потерял элемент фокус или нет, отслеживают событие по щелчку на HTMLBodyElement или в HTML-документ .
И если кто-то из них обратит внимание на нажатие Вкладка а если фокус теряется, то большинство людей вообще игнорируют этот факт.
Фокус/Размытие
Есть 4 «волшебных» события DOM:- сосредоточиться
- размытие
- сосредоточиться
- фокус
При создании своего элемент пользовательского интерфейса для jQuery пришлось столкнуться с 2 проблемами, связанными с тем, что внутри моего элемента используется HTMLInputElement (здесь и далее я имею в виду то же самое HTMLВыбратьЭлемент И HTMLButtonElement ).
Проблема номер один — отсутствие всплывания событий.
сосредоточиться И размытие .
И тогда они придут нам на помощь сосредоточиться И фокус .
Теперь мы можем работать с событиями фокуса на уровне родительского элемента.
Проблема номер два — генерация событий размытие И фокус в родительском элементе, когда происходит щелкнуть о дочерней компании HTMLInputElement (атрибут табиндекс влияет только на получение фокуса с помощью Вкладка а).
Что в свою очередь «ломает» всю нашу логику работы с разрабатываемым UI-элементом.
На данный момент я не нашел «достойного» решения данной проблемы (отслеживание событий по щелчку на документ или тело , тоже не «прилично») Первое возможное решение — транслировать события клавиатуры «детям», сохраняя при этом фокус на «родителе», но на данный момент ни один из браузеров не поддерживает корректную генерацию событий этого типа (Fx поддерживает его собственный интерфейс.
IE9 и Chrome придерживаются стандартный , но у них глюк при передаче кода нажатой клавиши - всегда передается ноль.
Opera вообще не может генерировать события клавиатуры) Во-вторых, проверка документ.активныйЭлемент во время событий потери фокуса (и здесь есть некоторые проблемы, в Fx и Chrome активныйэлемент становится ссылкой на новый элемент, получивший фокус только после завершения события размытие ).
А поскольку ни один из этих способов не работает, мне пришлось прибегнуть к «грязному хаку».
Инструкции по событию размытие удалить из общего потока, другими словами, мы используем setTimeout .
> > > UPD
Оказывается, мы с разработчиками jQuery пошли по одному и тому же пути для решения этой проблемы( автозаполнение ) <<<
Системные цвета CSS
Почему-то мало кто помнит (знает) о системные цвета .Уважаемые разработчики, давайте уважать пожелания пользователя и использовать те цвета, которые он предпочитает видеть в своей ОС.
Ведь не все хотят читать на белом фоне и, соответственно, не используют синий цвет для выделения текста.
> > > UPD Конечно, если вы создаете кнопку для своего стилизованного приложения, то использовать системные цвета глупо.
Я говорю о случаях, когда эмулируется системный элемент GUI или его вариант. Например, в Sencha (ранее ExtJS) для фона элементов используется белый цвет вместо Окно .
Здесь пример .
В jQuery цвет по умолчанию для всех решений пользовательского интерфейса — оранжевый.
Почему они решили это сделать, для меня до сих пор загадка.
Многим бы они облегчили жизнь, если бы по умолчанию использовали системные цвета (Признавайтесь, у кого начались проблемы со стилями jQuery UI при прикреплении календаря? :) ) <<<
событие.
stopPropagation() Инструкция по прерыванию потока событий — самое большое зло, которое я видел на веб-страницах.
Если вдруг у вас какой-то элемент работает некорректно, или ссылки перестают работать по странным обстоятельствам, то знайте, это результат наличия данной инструкции.
Его можно осторожно использовать только там, где вы абсолютно уверены, что без него не обойтись.
Где альтернативное решение будет стоить вам слишком дорого.
Но как правило, если вы использовали «это», значит, в вашем решении был архитектурный недостаток.
Тривиальный пример: перехват щелчков мышью по вашему элементу и прерывание потока сообщений.
Всё — теперь все, кто привязан к получению этого события (см.
все плагины, которые «закрываются» при нажатии вне них), будут работать некорректно.
Или сверните всплывающее окно, нажав клавишу Побег не будет работать, если ваш элемент перехватывает нажатия клавиш и имеет фокус.
ВАИ-АРИЯ
И, наконец, стандарт, о котором я узнал после выхода IE8. Он определяет подходы к содержимому сайта и/или интернет-приложения с устройства (браузера).Стандарт разработан и представлен как механизм, позволяющий людям с ограниченными возможностями полноценно использовать свой интернет-проект. Но мне кажется, что этот стандарт будет активно использоваться в мобильных браузерах.
Потому что использование элементов пользовательского интерфейса, поддерживающих WAI-ARIA, сделает их более удобными.
Например, вот как выглядит расширенный HTMLSelectElement в мобильной версии IE9: 
Согласитесь, выбирать из такого списка на мобильном телефоне гораздо удобнее и приятнее, чем из небольшого, хоть и «приятного», сделанного с помощью JS и HTML.
Вместо послесловия
По большому счету, я решил написать эту заметку, чтобы попросить помощи у хабро-сообщества в решении проблемы.фокус/размытие .
Я ищу его уже больше месяца и даже подумываю обратиться либо к разработчикам браузеров для стандартизации изменений activeElement, либо к w3c.
"Это интересно".
Наиболее хорошо продуманные элементы пользовательского интерфейса реализованы Google в Gmail. Это кнопки над списком букв.
Теги: #JavaScript #combobox #jQuery #focus #events #Разработка веб-сайтов
-
Как Связаться С Gmail
19 Oct, 24 -
Бинсвангер, Людвиг
19 Oct, 24 -
Mctop: Мониторинг Memcached-Кластера
19 Oct, 24 -
Выделение Синтаксиса Считается Вредным
19 Oct, 24 -
Версия 1.0.9
19 Oct, 24
