JQuery: как узнать, имеет ли элемент ввода фокус

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

if (isDef($("*:focus").attr("id")))
    return;

Он отлично работает практически во всех основных браузерах, но IE. В Internet Explorer div также может сосредоточиться на них, и почти в каждом случае на него сосредоточен какой-то элемент на странице. Таким образом, я хочу проверить, не имеет ли какой-то элемент фокуса, но какой-то элемент, который может принимать ввод с клавиатуры, имеет фокус. В моем случае это ограничивается textarea или input. Как проверить, имеют ли элементы этих двух типов фокус?

Ответ 1

Вы можете сделать это легко, используя выражение jquery is.

if($("input,textarea").is(":focus")){
//input and text area has focus
}
else{
//no focus for input and textarea
}

если вы хотите проверить фокус только текстового поля вместо каждого элемента ввода, а затем изменить ввод с помощью ввода ['text']

Ответ 2

if ( $("*:focus").is("textarea, input") ) return;

Ответ 3

Добро пожаловать в 2015 год, где вам не нужен jQuery для такого рода вещей. Vanilla JS поддерживает HTMLELement.matches(Query:String)

так что мы можем сделать что-то вроде,

var el = document.getElementById("El")
if(el.matches(":focus")) // true or false (You can use other CSS selectors too)

Ответ 4

Вот пример моего примера кода, который может вам помочь.

 // add the "hover" class when got focus
 $('.icheckbox_square-green').focusin(function () {
     $(this).addClass('hover');
 });

 // Remove the "hover" class when lost focus
 $('.icheckbox_square-green').focusout(function () {
     $(this).removeClass('hover');
 });

Ответ 5

Альтернативным решением "raw javascript" для вашей проблемы может быть использование свойства element.tabIndex.

canvas.tabIndex = 0;

Это позволит вам использовать этот

canvas.onkeydown = function(){
    ...
}

Вместо этого

document.body.onkeydown = function(){
    ...
}

Таким образом, чтобы контролировать холст, вы должны сначала сосредоточиться на нем - точно так же, как флеш-игра.

Когда холст не сфокусирован, он ничего не сделает. И вы сможете ввести в соседнее текстовое поле, не вмешиваясь в холст.

Вы также можете дать некоторую визуальную индикацию о том, что холст сфокусирован, используя псевдоселектор :focus в css:

canvas:focus{
    ...
}

Я уверен, что существует эквивалентное свойство tabIndex в jQuery. Я также уверен, что IE поддерживает свойство tabIndex.

Надеюсь, что поможет