quick tip Как сделать любой элемент фокусируемым?

[Great Rash]

Сейчас, когда на дворе почти 2015 год, стало модно делать всякие эффекты без использования JS. Обычно для переключения состояний элемента используются следующие псевдоклассы:
 
:focus
:checked
:active

Вот про первый я и хочу написать небольшую заметку. Знаете ли вы, что в HTML можно сделать любой элемент способным получать фокус? Для этого достаточно просто добавить атрибут tabindex к любому тегу. Есть правда один нюанс - tabindex отвечает за то, в каком порядке пользователь будет переключаться между полями формы (используя клавишу Tab). По умолчанию индексы расставляются браузером автоматически по мере появления контрола в коде, но мы можем изменить порядок переключения задав tabindex, значения которого начинаются с нуля.

Так вот, если мы просто зададим табиндекс нашему кастомному элементу - это может нарушить логику работы с формой. Однако есть небольшая хитрость: мы можем задать отрицательное значение, в таком случае браузер будет просто игнорировать клавишу Tab, но при клике на такой элемент он всё равно получит фокус.

Вот собственно и всё! В заключении небольшой примерчик.

[lampresort]

Спасибо, открыл для себя свойство transition

[psywalker]

Спасибо, открыл для себя свойство transition

Имхо, в этой теме акцент идёт не на transition, а на очень полезный и хитрый приём, связанный с фокусом на элементах. Я бы обратил внимание именно на второе

[lampresort]

 

Спасибо, открыл для себя свойство transition

Имхо, в этой теме акцент идёт не на transition, а на очень полезный и хитрый приём, связанный с фокусом на элементах. Я бы обратил внимание именно на второе

 

А вот на счет фокуса не понял, можете пояснить?

[psywalker]

А вот на счет фокуса не понял, можете пояснить?

 

Конечно!

 

Есть такой атрибут "tabindex". Нужен он для того, чтобы, элемент, на который он вешается, мог получать фокус по клавише "tab". Вот здесь о нём можно подробнее почитать. Прикол его в том, что "tabindex" может вешаться на любой элемент, а ни как, возможно, некоторые предполагают, что только на элементы формы или ссылки. Т.е. допустим у нас есть элемент "div", мы вешаем на него "tabindex" вот так: 

<div tabindex="1">Теперь я могу иметь фокус </div>

и теперь, нажимая клавишу "tab", фокус перейдёт к этому элементу, т.е. сфокусируется на нём. Таких элементов мы можем сделать сколько угодно и повесить на всех на них tabindex" с разными числовыми значениями, начиная с "1" и выше. И по нажатию клавиши "tab" фокус будет путешествовать от одного элемента к другому.

 

Теперь с помощью псевдокласса "focus" мы можем назначать стили (css) элементу, на котором сейчас находится фокус.

 

Задача, которую описывал Great Rash, состоит в том, чтобы немного "обмануть систему" и сделать так, чтобы нужные нам элементы могли иметь фокус, но при этом только с помощью нажатия на них курсором мышки, а не с помощью клавиши "tab". Т.е. как бы фокус есть, но клавиша "tab" игнорируется именно для этих элементов. Решение: просто вешаем на нужные нам элементы "tabindex" с отрицательным значением, например, "-1". Вот и всё)

 

Зацени теперь ещё разок пример Great Rash'a.

[lampresort]

psywalker Спасибо большое, понял. Буду пробовать. С псевдоклассами и псевдоэлементами еще не знаком. Они изначально определены?

[psywalker]

psywalker Спасибо большое, понял. Буду пробовать. С псевдоклассами и псевдоэлементами еще не знаком. Они изначально определены?

Можно сказать и так. А лучше почитать о них более подробно.