Проверка, имеет ли элемент <input> фокус с помощью jQuery

Вопрос: Как сделать так, чтобы при фокусе на инпуте его граница становилась красной, а при потере фокуса — граница возвращалась к исходному состоянию?

Ответ: Вы можете использовать следующий код на CSS и jQuery для достижения желаемого эффекта.

Сначала добавьте CSS-класс .focus для изменения цвета границы:

.focus {
    border-color: red;
}

Теперь добавьте jQuery, чтобы управлять классами при фокусе и потере фокуса:

$(document).ready(function() {
    $('input').blur(function() {
        $(this).removeClass("focus"); // Убираем класс focus при потере фокуса
    })
    .focus(function() {
        $(this).addClass("focus"); // Добавляем класс focus при установке фокуса
    });
});

Этот код работает следующим образом: при получении фокуса класс focus добавляется к элементу <input>, изменяя цвет его границы на красный. Как только фокус теряется (нажимаете на другое место на странице или переходите к другому элементу), класс focus удаляется, и граница возвращается к своему исходному состоянию.

Убедитесь, что у вас подключена библиотека jQuery, чтобы код работал корректно.

Не совсем понимаю, что именно вы хотите сделать, но, похоже, это можно решить, сохраняя состояние элементов ввода (или div?) в переменной:

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

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // здесь можно выполнить какое-то действие
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // здесь можно выполнить другое действие
        } else { }
    });

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

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

Если кому интересно, сейчас существует гораздо лучший способ захвата фокуса — $(foo).focus(...).

Вы можете ознакомиться с документацией по этому методу по следующей ссылке: jQuery API - focus().

Да, вы можете рассмотреть возможность использования событий mouseOver и mouseOut, чтобы смоделировать это поведение. Эти события позволяют отслеживать, когда курсор мыши входит и покидает элемент. Также рекомендую обратить внимание на события mouseEnter и mouseLeave. Они работают аналогично, но не срабатывают при наведении на дочерние элементы, что может быть полезно в некоторых случаях. Выбор между этими событиями зависит от ваших требований.

Чтобы отслеживать состояние наведения (hover) и фокуса (focus), вы можете использовать булевы переменные (флаги), которые будут принимать значение true или false. При изменении любого из этих состояний вызывайте функцию, которая будет добавлять или удалять границу в зависимости от значений этих флагов.

Вот пример реализации:

let focused = false;
let hovered = false;

function updateBorder() {
    const element = document.getElementById('yourElementId'); // Замените 'yourElementId' на ID вашего элемента
    if (!focused && !hovered) {
        element.style.border = 'none'; // Убираем границу, если оба флага ложны
    } else {
        element.style.border = '1px solid black'; // Показываем границу, если хотя бы один флаг истинен
    }
}

// Обработчик события onfocus
document.getElementById('yourElementId').addEventListener('focus', () => {
    focused = true;
    updateBorder();
});

// Обработчик события onblur
document.getElementById('yourElementId').addEventListener('blur', () => {
    focused = false;
    updateBorder();
});

// Обработчик события onmouseover
document.getElementById('yourElementId').addEventListener('mouseover', () => {
    hovered = true;
    updateBorder();
});

// Обработчик события onmouseout
document.getElementById('yourElementId').addEventListener('mouseout', () => {
    hovered = false;
    updateBorder();
});

В этом коде:

• Мы объявляем два булевых флага: focused и hovered.
• Функция updateBorder проверяет состояние этих флагов и добавляет или удаляет границу у элемента.
• Мы используем обработчики событий для управления значениями флагов при наведении и фокусировке на элементе.

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