На первой странице сайта, который я создаю, несколько <div>
пользователей используют :hover
псевдокласс CSS, чтобы добавить рамку, когда на них указывает курсор мыши. Один из <div>
s содержит a, <form>
который, используя jQuery, сохранит границу, если вход внутри него имеет фокус. Это прекрасно работает, за исключением того, что IE6 не поддерживает :hover
никаких элементов, кроме <a>
s. Таким образом, только для этого браузера мы используем jQuery для имитации CSS :hover
с помощью $(#element).hover()
метода. Единственная проблема заключается в том, что теперь, когда jQuery обрабатывает как форму, так focus()
и hover()
, когда ввод имеет фокус, пользователь перемещает мышь внутрь и наружу, граница исчезает.
Я думал, что мы могли бы использовать какое-то условие, чтобы остановить это поведение. Например, если мы проверили при наведении мыши, фокусировался ли какой-либо из входов, мы могли бы остановить исчезновение границы. AFAIK, :focus
в jQuery нет селектора, поэтому я не уверен, как это сделать. Любые идеи?
источник
Ответы:
JQuery 1.6+
jQuery добавил
:focus
селектор, поэтому нам больше не нужно добавлять его самостоятельно. Просто используйте$("..").is(":focus")
JQuery 1,5 и ниже
Изменить: С течением времени мы находим лучшие методы для тестирования фокуса, новый фаворит это суть от Бен Алман :
Цитируется Матиасом Биненсом здесь :
Вы определяете новый селектор. Смотрите плагины / авторинг . Тогда вы можете сделать:
или:
Любой JQuery
Если вы просто хотите выяснить, какой элемент имеет фокус, вы можете использовать
Если вы не уверены, будет ли версия 1.6 или ниже, вы можете добавить
:focus
селектор, если он отсутствует:источник
if (!jQuery.expr[':'].focus) { /* gist from Ben Alman */ }
?CSS:
JQuery:
источник
Вот более надежный ответ, чем принятый в настоящее время:
Обратите внимание, что
(elem.type || elem.href)
тест был добавлен для фильтрации ложных срабатываний, какbody
. Таким образом, мы обязательно отфильтруем все элементы, кроме элементов управления формы и гиперссылок.(Взято из этой сущности по Бен Alman .)
источник
Апрель 2015 Обновление
Поскольку этот вопрос уже давно существует, и в игру вступили некоторые новые соглашения, я чувствую, что должен упомянуть, что этот
.live
метод устарел.На его месте
.on
метод был теперь введен.Их документация весьма полезна для объяснения того, как это работает;
Итак, для того, чтобы вы нацелились на событие, ориентированное на ввод, вы можете использовать это в скрипте. Что-то вроде:
Это достаточно надежно и даже позволяет использовать клавишу TAB.
источник
Я не совсем уверен, что вы ищете, но это звучит так, как будто это может быть достигнуто путем сохранения состояния элементов ввода (или div?) В виде переменной:
источник
Альтернативой использованию классов для маркировки состояния элемента является функциональность внутреннего хранилища данных .
PS: Вы можете хранить логические значения и все, что пожелаете, используя
data()
функцию. Дело не только в строках :)И тогда это просто вопрос доступа к состоянию элементов.
источник
если кого-то волнует, есть лучший способ захватить фокус сейчас,
$(foo).focus(...)
http://api.jquery.com/focus/
источник
Задумывались ли вы об использовании mouseOver и mouseOut для имитации этого. Также посмотрите на mouseEnter и mouseLeave
источник
Следите за обоими состояниями (hovered, focus) как за флагами true / false, и всякий раз, когда один из них изменяется, запускайте функцию, которая удаляет рамку, если оба имеют значение false, в противном случае показывает рамку.
Итак: наборы onfocus focus = true, наборы onflur focus = false. onmouseover устанавливает hovered = true, onmouseout устанавливает hovered = false. После каждого из этих событий запускается функция, которая добавляет / удаляет границу.
источник
Насколько я знаю, вы не можете спросить браузер, фокусируется ли какой-либо ввод на экране, вам нужно настроить какое-то отслеживание фокуса.
У меня обычно есть переменная с именем «noFocus» и она имеет значение true. Затем я добавляю событие фокуса ко всем входам, что делает noFocus ложным. Затем я добавляю событие размытия ко всем входам, которые возвращают noFocus значение true.
У меня есть класс MooTools, который обрабатывает это довольно легко, я уверен, что вы могли бы создать плагин jquery, чтобы сделать то же самое.
После того, как это будет создано, вы можете проверить noFocus перед любой заменой границ.
источник
Нет: focus, но есть: selected http://docs.jquery.com/Selectors/selected
но если вы хотите изменить то, как все выглядит в зависимости от того, что вы выбрали, вы, вероятно, должны работать с событиями размытия.
http://docs.jquery.com/Events/blur
источник
Существует плагин для проверки того, что элемент сфокусирован: http://plugins.jquery.com/project/focused
источник
У меня было событие .live ("focus"), установленное для выбора () (выделения) содержимого текстового ввода, чтобы пользователю не пришлось выбирать его перед вводом нового значения.
$ (FormObj) .select ();
Из-за причуд между разными браузерами выбор иногда заменяется вызвавшим его щелчком, и он отменяет выбор содержимого сразу после размещения курсора в текстовом поле (в большинстве случаев он работал нормально в FF, но не работал в IE)
Я думал, что смогу решить эту проблему, поставив небольшую задержку на выбор ...
SetTimeout (функция () {$ (formObj) .select ();}, 200);
Это работало нормально, и выбор сохранялся, но возникала забавная проблема. Если вы переходите с одного поля на другое, фокус переключится на следующее поле, прежде чем произойдет выбор. Так как выбор крадет фокус, фокус затем возвращается и запускает новое событие «фокус». Это закончилось каскадом ввода, выбирающим танцы по всему экрану.
Реальным решением было бы проверить, что поле все еще имеет фокус, прежде чем выполнять select (), но, как уже упоминалось, нет простого способа проверить ... Я закончил тем, что просто обошелся без подсветки целиком, а не повернул то, что должно быть один вызов jQuery select () в огромную функцию, загруженную подпрограммами ...
источник
В итоге я создал произвольный класс с именем .elementhasfocus, который добавляется и удаляется в функции jQuery focus (). Когда функция hover () запускается при наведении мыши, она проверяет наличие .elementhasfocus:
Поэтому, если у него нет этого класса (читай: ни один элемент внутри div не имеет фокуса), граница удаляется. В противном случае ничего не происходит.
источник
просто
источник