Почему не работает focus css

Не работает focus для инпутов и текстэриа

Комментарий модератора

Один вопрос — одна отдельная тема!

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Разработка своего элемента управления. Не работает TabNavigations и корректный Focus для внутренних элементов
Требуется помощь в доработке элемента управления и его шаблона (это не наследник от UserControl, а.

Не работает метод focus()
Я делю форму поиска которая ищет товар по старние (один таб) и по области-городу (второй таб).

Не работает :focus в Safari
Столкнулся с такой проблемой: имеется кнопка, на ней стоит autofocus, то есть при загрузке страницы.

Не работает фокусирование на странице. focus();
Как сделать фокус на страницу? Есть функция и при её срабатывании хтмл страничка должна приходить.

Не работает событие focus() (я 1000 раз напишу на доске разницу JS и Java)
Помогите разобраться. Не заменяется картинка по событию focus() $(document).ready(function () <.

Плагин для валидации инпутов без редактирования HTML
Нужно, чтобы кастомное сообщение о неправильном инпуте высвечивалось в такой вот рамке, как если.

Logical Focus для кнопок в WinForms
Здравствуйте, у меня возникла проблемой с которой я бьюсь уже больше месяца. Есть приложение.

Focus на WebBrowser для его прокрутки колесом мыши
Доброго времени суток. Есть форма на ней поля для ввода данных и webBrowser1 для просмотра пдф. .

В теме для WP в OPERA 12 для не отрабатывается focus после события click мыши
Форумчане доброго дня! Очень нужна Ваша помощь в решении следующей проблемы. Есть сайт на.

валидность инпутов
Добрый день! у меня есть инпуты, и мне нужно свалидировать их на пустоту используя blur и focus.

Источник

Оформляйте стили наведения, фокуса и активного состояния по-разному

В течение многих лет я оформлял состояния элементов :hover , :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.

Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.

Давайте начнём с :hover .

Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.

Обычно это состояние заключается в изменении цвета фона background-color и/или текста color . Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

Стилизация фокуса (:focus)

:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:

1. при выборе элемента кнопкой «Tab»
2. при щелчке на элемент мышью

К фокусным элементам относятся:

и т.д)

Элементы с атрибутом tabindex

Следует помнить о некоторых важных моментах:

Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

1. Добавление обводки (outline)
2. Создание анимаций
3. Изменение background-color
4. Изменение color

Поскольку изменение свойств background-color и color часто производится при :hover , имеет смысл состояние :focus оформлять с помощью обводки или анимации.

Вы можете использовать комбинации свойств outline , border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».

Стилизация активного состояния (:active)

При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.

На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active . Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:

1. Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)
2. Удержание кнопки пробела (на кнопках)

Две особенности, которые следует принять к сведению:

1. Удержание пробела вызывает состояние :active у кнопок ( ), но при удержании Enter этого не происходит
2. Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

При удержании левой кнопку мыши на фокусируемом элементе, вызывается его активное состояние. Но одновременно с этим вызывается и состояние фокуса.

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus . В Safari – только состояние :active (проверено только на Mac OS)
2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на

Для кнопок:

1. Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

Если нужно, чтобы клики вызывали фокус для кнопок, нужно как можно раньше добавить этот JavaScript (для чего это нужно, можно прочитать в статье, ссылку на которую я указал выше).

Добавление этого кода изменит поведение нажатия кнопок на следующее:

1. При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome
2. Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода

Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх

Волшебная комбинация

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

Для пользователей мыши:

1. Когда пользователь наводит на элемент, меняется background-color (и/или color ). Происходит отклик.
2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
2. Когда они взаимодействуют с элементом, меняется background-color (и/или color ). Происходит отклик.

Лучшее из обоих миров!

1. Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.
2. Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.

Вот что произойдёт в Safari и Firefox на Mac OS:

1. Когда пользователь держит кнопку мыши нажатой, ничего не меняется
2. Когда пользователи отпускают кнопку, элемент получает фокус

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover , :focus и :active по отдельности.

Поведение кнопки в Safari, если были стилизованы все три состояния

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Источник

input:focus is not working

i tried to google style input box . but i stucked at input:focus. code is below http://jsfiddle.net/GmgUZ/

Any insight would be greatly appreciated!

2 Answers 2

Use input#gText:focus instead of input[type=»text»]:focus and add outline: none;

input#gText:focus <
border:1px solid #4D90FE;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.3) inset;
outline: none;
>

You have a CSS Specificity problem, what does this means? It means that you have some rule styling that wins over your «input[type=»text»] selector, if you really need your selector to win you will need to specify that this styles are more important than the others with the keyword «!important» at the end of each style, try it:

This is not a hack is in the css specification, but if you left this style like that you will regret one day, because you don’t have a good specificity, and any rule that you try to apply to this element for example this rule will win over a rule with the id of the element, for example «#my_input_type_text» or class selector «.my-input-text»

Not the answer you’re looking for? Browse other questions tagged css input or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Управ­ле­ние фо­ку­сом и ат­ри­бут inert

Множество вспомогательных технологий используют навигацию с клавиатуры для помощи в восприятии и взаимодействии с контентом. Один из способов подобной навигации — клавиша Tab. Возможно, вы знакомы с ним, если используете Tab для быстрого перемещения между полями формы, не дотягиваясь до мышки или трекпада.

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

Список интерактивных элементов, по которым можно пройтись клавишей Tab:

Интерактивный элемент получает состояние фокуса, когда:

• На него переходят с помощью клавиши Tab,
• Он является ссылкой и на него кликают,
• Фокус программно задан с помощью element.focus() в JavaScript.

Фокус похож на ховер, поскольку так мы определяем элемент, с которым хотим провзаимодействовать. Вот почему визуально очевидные стили для фокуса имеют огромное значение.

Фокус следует по домашней странице. Начиная с логотипа, затем к товарам, услугам, вакансиям, блогу, контактам и останавливается на кнопке «Learn more».

Управление фокусом Скопировать ссылку

Управлять фокусом — значит определять, какие элементы могут его получать, а какие нет. Это один из самых сложных аспектов при разработке веб-интерфейсов, но он важен для доступности сайтов и приложений.

Полезные практики управления фокусом Скопировать ссылку

В 99% случаев вам стоит оставить порядок фокуса в покое. Не устану это повторять.

Состояние фокуса будет работать без дополнительных усилий, если вы используете для кнопок, для ссылок, для полей форм и т. д.

В редких случаях вам может понадобиться добавить фокус к элементам, к которым обычно событие focus не применимо. Вот некоторые рекомендации относительно того, как реализовать это доступно и интуитивно понятно для пользователя.

✅ Следует: узнать побольше про атрибут tabindex Скопировать ссылку

tabindex делает элементы фокусируемыми. В качестве значения он принимает число, в зависимости от которого меняется поведение фокуса.

❌ Не следует: устанавливать tabindex=»0″ там, где это не надо Скопировать ссылку

Нет необходимости устанавливать tabindex для интерактивных элементов, которые могут получать фокус с клавиатуры (например, ). Кроме того, вам не нужно прописывать tabindex неинтерактивным элементам, чтобы их могли прочесть вспомогательные устройства (на самом деле, отсутствие роли и доступного имени является ошибкой с точки зрения WCAG). На самом деле, это даже усложняет навигацию для тех, кто использует вспомогательные устройства. У таких пользователей уже есть другие, ожидаемые ими способы чтения контента.

✅ Следует: устанавливать tabindex=»-1″ для фокуса с помощью JavaScript Скопировать ссылку

Атрибут tabindex=»-1″ используется для создания доступных интерактивных виджетов посредством JS. Прописав tabindex=»-1″ , вы сделаете элемент фокусируемым для JS, а также по клику или тапу, но недоступным через клавишу Tab.

❌ Не следует: использовать положительное значение tabindex Скопировать ссылку

Это антипаттерн. Установив положительное значение tabindex , вы переопределите ожидаемый порядок элементов для фокуса через Tab и запутаете пользователя. Сделать так один раз — уже плохо, несколько — полный кошмар. Серьёзно, не надо так.

❌ Не следует: создавать собственный порядок фокусировки Скопировать ссылку

Пройтись по интерактивным элементам можно только в том порядке, в котором они следуют друг за другом. Не следует создавать множество tabindex со значением, которое увеличивается для каждого последующего элемента, в соответствии с вашим представлением о том, как пользователь должен читать ваш сайт. Позвольте DOM сделать это за вас.

Ловушка фокуса Скопировать ссылку

Иногда есть необходимость запретить состояние фокуса. Хороший пример запрета — это ловушка фокуса, которая временно ограничивает событие фокуса у родительского элемента и у его дочерних элементов.

Ловушку фокуса не стоит путать с ловушкой клавиатуры. Ловушки клавиатуры — это ситуации, когда невозможно закрыть виджет или перейти к другому компоненту из-за вложенного цикла плохо прописанной логики.

Практический пример того, как вы могли бы использовать ловушку фокуса — это модальное окно:

Фокус проходит по странице и открывает модальное окно, чтобы продемонстрировать отмену фокуса. Далее фокус двигается в рамках контента модального окна, на кнопку «Play», кнопку «Cancel», кнопку «Purchase» и кнопку закрытия (всё это время фокус на странице заблокирован). После закрытия модального окна он возвращается к исходному положению на странице до его открытия.

Почему это важно? Скопировать ссылку

Удержание фокуса в пределах модального окна помогает понять, что является его контентом, а что нет. Это аналогично тому, как зрячий человек может видеть, как окно всплывает поверх контента сайта или приложения. Это важная информация, если:

• У вас плохое зрение или слепота и вы полагаетесь на скринридер, чтобы узнать об изменениях после взаимодействия со страницей;
• У вас плохое зрение и интерфейс увеличен с помощью экранной лупы, при которой фокусировка за пределами модального окна может сбить с толку и дезориентировать;
• Вы перемещаетесь исключительно с помощью клавиатуры и, в случае закрытия модального окна, можете потеряться на странице при попытке вернуться обратно к нему.

Как это сделать? Скопировать ссылку

Надёжно управлять фокусом — дело сложное. Нужно прибегнуть к JavaScript, чтобы:

1. Определить родительский блок для всех фокусируемых элементов на странице;
2. Определить границы содержимого ловушки фокуса (например, модального окна), включая первый и последний фокусируемый элемент;
3. Убрать как интерактивность, так и видимость всего, что может иметь фокус и находится вне рамок содержимого ловушки фокуса;
4. Переместить фокус на содержимое ловушки фокуса;
5. Обрабатывать события, сигнализирующие об уходе с выделенной области (сохранение, отмена, нажатие Esc и так далее);
6. Выйти из содержимого ловушки фокуса, когда сработает нужное событие;
7. Вернуть раннее отменённую интерактивность;
8. Переместить фокус обратно на интерактивный элемент, который вызвал ловушку фокуса.

Зачем нам это? Скопировать ссылку

Не стану врать: все эти действия отнимают много времени. Но всё же, управление фокусом и удобный порядок фокусировки являются частью WCAG (руководства по обеспечению доступности веб-контента). Тема достаточна важна, чтобы считать её частью международного правового стандарта о юзабилити.

Видимость Скопировать ссылку

Существует небольшой трюк, с помощью которого можно легко ограничить видимость и интерактивность элемента.

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

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

Видимость может быть заблокирована с помощью правильного применения атрибута aria-hidden=»true» . А вот с интерактивностью есть один тонкий нюанс.

Знакомство с inert Скопировать ссылку

Атрибут inert — глобальный атрибут в HTML, позволяющий легко убирать и восстанавливать видимость интерактивных элементов, а также их возможность получать состояние фокуса. Вот пример:

Я намеренно избегаю использования для модального окна из-за многочисленных проблем с поддержкой.

Атрибут inert задан элементу , следующему сразу после модального окна сохранения изменений. Теперь всё содержимое не может попасть в фокус и по нему нельзя кликнуть.

Фокус ограничен рамками модального окна. Когда мы закрываем его, то убираем inert из . Этот способ управления ловушкой фокуса проще, чем другие методы.

Помните: событие закрытия модального окна может быть вызвано не только нажатием на кнопки внутри нашего модального окна из примера, но и при нажатии на Esc. А ещё некоторые модальные окна могут быть закрыты по клику на оверлей.

Поддержка inert Скопировать ссылку

Все последние версии Edge, Chrome и Opera поддерживают inert , если включены экспериментальные функции веб-платформ. Также скоро появится его поддержка в Firefox! Единственное исключение — Safari, как мобильный, так и десктопный.

Мне бы очень хотелось, чтобы Apple реализовала встроенную поддержку inert . Хоть полифил и существует, но у него серьёзные проблемы с поддержкой скринридерами. Нехорошо!

Вдобавок хочется обратить внимание на пометку в README полифила:

Полифил обойдётся вам дорого с точки зрения производительности, в отличие от нативного inert , т. к. он требует изрядного количества перемещений по DOM.

Перемещение по DOM подразумевает, что JavaScript в полифиле требует высокой вычислительной мощности и, следовательно, в конечном итоге замедлит использование.

Для устройств с низким энергопотреблением, таких как бюджетные Android-смартфоны и устаревшие ноутбуки, а также тех, что выполняют сложные задачи (например, запуск нескольких приложений сразу), это может привести к зависанию или сбоям. Нативная браузерная поддержка делает такие процессы менее затратными в этом плане, так как у браузера есть доступ ко всем частям DOM, в отличие от JS.

Safari Скопировать ссылку

Лично я разочарован тем, что Apple не поддерживает inert . Хотя понимаю, что добавление новых функций в браузер — невероятно сложная и трудная работа. inert кажется функцией, которую Apple стоило бы начать поддерживать гораздо раньше.

macOS и iOS всегда имели хорошую поддержку доступности, а поддержка вспомогательных технологий — важная часть их маркетинговой кампании. Поддержка inert представляется как естественное продолжение миссии Apple ввиду того, что сама эта функция смогла бы облегчить разработку доступных веб-интерфейсов в разы.

К сожалению, Apple держит в тайне, когда появится поддержка этого атрибута. Поэтому поддержка inert — всё ещё открытый вопрос.

Igalia Скопировать ссылку

Igalia — компания, работающая над функциями браузеров. Сейчас они проводят эксперимент, в котором каждый может проголосовать за те возможности браузеров, которые ему хотелось бы видеть. Конечно, моя статья совсем не про это, но вы можете узнать больше в Smashing Magazine.

Одно из предложений Igalia — это добавление поддержки inert в WebKit. Если вы искали возможность принять участие в улучшении доступности веба, но не знали с чего начать, я могу вам её предоставить. 5 $, 10 $, 25 $ — совсем необязательно жертвовать большие суммы, даже маленький вклад ценен.

Итог Скопировать ссылку

Управление фокусом требует некоторых навыков и осторожности, но это того стоит. Атрибут inert значительно облегчит эту задачу.

Такие техники, как inert , являются примером одной из самых сильных сторон веба: способности кодифицировать неожиданное поведение в нечто простое и эффективное.

Источник