jQuery 1.6+

jQuery добавил селектор :focus, поэтому нам больше не нужно добавлять его самостоятельно. Просто используйте $("..").is(":focus")

jQuery 1.5 и ниже

Изменить: Время меняется, и мы находим более эффективные методы для проверки фокуса, новым фаворитом является эта суть от Бена Алмана:

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

Цитата из Матиаса Биненса, здесь:

Обратите внимание, что тест (elem.type || elem.href) был добавлен для фильтрации ложных срабатываний, таких как body. Таким образом, мы отфильтровываем все элементы, кроме элементов управления формой и гиперссылок.

Вы определяете новый селектор. См. Плагины / Разработка. Тогда вы сможете:

if ($("...").is(":focus")) {
  ...
}

or:

$("input:focus").doStuff();

Любой jQuery

Если вы просто хотите выяснить, какой элемент имеет фокус, вы можете использовать

$(document.activeElement)

Если вы не уверены, будет ли версия 1.6 или ниже, вы можете добавить селектор :focus, если он отсутствует:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

Вот более надежный ответ, чем принятый в настоящее время:

jQuery.expr[':'].focus = function(elem) {
  return elem === document.activeElement && (elem.type || elem.href);
};

Обратите внимание, что тест (elem.type || elem.href) был добавлен для фильтрации ложных срабатываний, таких как body. Таким образом, мы отфильтровываем все элементы, кроме элементов управления формой и гиперссылок.

(Взято из этой сути Бен Алман.)

Обновление за апрель 2015 г.

Поскольку этот вопрос существует некоторое время и в игру вступили некоторые новые соглашения, я считаю, что должен упомянуть, что метод .live обесценился.

Вместо него был введен метод .on.

Их документация весьма полезна для объяснения того, как это работает;

Метод .on () присоединяет обработчики событий к текущему выбранному набору элементов в объекте jQuery. Начиная с jQuery 1.7, метод .on () предоставляет все функции, необходимые для подключения обработчиков событий. Для получения помощи в преобразовании из более старых методов событий jQuery см. .Bind (), .delegate () и .live ().

Итак, чтобы настроить таргетинг на событие, ориентированное на ввод, вы можете использовать это в сценарии. Что-то вроде:

$('input').on("focus", function(){
   //do some stuff
});

Это довольно надежно и даже позволяет вам использовать клавишу TAB.

Я не совсем уверен, что вам нужно, но похоже, что этого можно достичь, сохранив состояние входных элементов (или div?) В качестве переменной:

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

Альтернативой использованию классов для отметки состояния элемента является внутренняя функциональность хранилища данных .

P.S .: Вы можете хранить логические значения и все, что захотите, используя функцию data(). Дело не только в струнах :)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

И тогда это просто вопрос доступа к состоянию элементов.

если кому-то интересно, есть способ лучше сфокусироваться, $(foo).focus(...)

http://api.jquery.com/focus/

Вы думали об использовании mouseOver и mouseOut для имитации этого. Также посмотрите mouseEnter и mouseLeave

Следите за обоими состояниями (при наведении курсора, в фокусе) как за истинными / ложными флагами, и всякий раз, когда одно из них изменяется, запускайте функцию, которая удаляет границу, если оба значения ложны, иначе показывает границу.

Итак: onfocus устанавливает focus = true, onblur устанавливает 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

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

У меня было событие .live ("focus"), настроенное на select () (выделение) содержимого ввода текста, чтобы пользователю не приходилось выбирать его перед вводом нового значения.

$ (formObj) .select ();

Из-за причуд между разными браузерами выбор иногда заменялся щелчком, вызвавшим его, и сразу после этого он отменял выбор содержимого в пользу размещения курсора в текстовом поле (в основном работал нормально в FF, но не работал в IE)

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

setTimeout (функция () {$ (formObj) .select ();}, 200);

Это работало нормально, и выбор сохранялся, но возникла забавная проблема ... Если вы переходили от одного поля к другому, фокус переключался на следующее поле до того, как произошло выбор. Поскольку select крадет фокус, тогда фокус вернется и вызовет новое событие «focus». Это закончилось каскадом входных выборок, танцующих по всему экрану.

Работоспособным решением было бы проверить, что поле все еще находится в фокусе перед выполнением select (), но, как уже упоминалось, нет простого способа проверить ... Я закончил тем, что просто отказался от всего автоматического выделения, а не поворачивал то, что должно быть единственный вызов jQuery select () в огромную функцию, загруженную подпрограммами ...

В итоге я создал произвольный класс с именем .elementhasfocus, который добавляется и удаляется в функции jQuery focus (). Когда функция hover () запускается при отключении мыши, она проверяет наличие .elementhasfocus:

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

Поэтому, если у него нет этого класса (читай: ни у одного элемента в div нет фокуса), граница удаляется. В противном случае ничего не происходит.

Простой

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>