Использование jQuery для проверки фокусировки ввода

What I wound up doing is creating an arbitrary class called .elementhasfocus which is added and removed within the jQuery focus() function. When the hover() function runs on mouse out, it checks for .elementhasfocus:

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

So if it doesn't have that class (read: no elements within the div have focus) the border is removed. Otherwise, nothing happens.

Нет: focus, но есть: selected http://docs.jquery.com/Selectors/selected

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

http: // docs.jquery.com/Events/blur inventory

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

Итак : onfocus устанавливает focus = true, onblur устанавливает focus = false. onmouseover устанавливает hovered = true, onmouseout устанавливает hovered = false. После каждого из этих событий запускается функция, которая добавляет / удаляет границу.

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

Обычно у меня есть переменная noFocus, и я устанавливаю для нее значение true. Затем я добавляю событие focus ко всем входам, которое делает noFocus ложным. Затем я добавляю событие размытия ко всем входам, которое устанавливает для noFocus значение true.

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

После этого создан, вы можете проверить noFocus перед заменой границ.

Я не совсем уверен, что вам нужно, но похоже, что этого можно достичь, сохранив состояние входных элементов (или 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;
        });
});

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

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

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

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

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

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

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

Существует плагин для проверки фокусировки элемента: http://plugins.jquery.com/project/focused

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