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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

Answer 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)

Answer 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');
 });

Answer 5

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

canvas.tabIndex = 0;

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

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

Вместо этого

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

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

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

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

canvas:focus{
    ...
}

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

---

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