Как вы можете сказать jQuery, чтобы обнаружить клавишу со стрелкой, если она не находится в поле ввода текста / ввода - PullRequest
Новая
       1

Как вы можете сказать jQuery, чтобы обнаружить клавишу со стрелкой, если она не находится в поле ввода текста / ввода

0 голосов
/ 12 февраля 2020

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

Это то, что я имею право сейчас 

$(document).keydown(function(e){
    if (e.which == 37) 
       dosomething();
});

Ответы [ 3 ]

1 голос
/ 12 февраля 2020

Вот как я это сделал: 

$(document).on("keydown", function(e){
    var isInput = false;
    var activeElement = document.activeElement; // this will get the currently focused dom node
    switch(activeElement.tagName.toLowerCase()){
        case "input":
        case "textarea":
        case "select":
            isInput = true;
    }
    if(!isInput){
        // execute your code here
    }
});

Если вам нужна поддержка contenteditable элементов, вы можете изменить свой оператор if на: 

if(!isInput && !activeElement.hasAttribute("contenteditable")){
    // your code
}

EDIT : для улучшения читабельности и удаления оператора switch вы также можете сделать что-то подобное (хотя это будет работать только в относительно современных браузерах; Edge 14+). 

$(document).on("keydown", function(e){
    var active = document.activeElement;
    if(!["input", "textarea", "select"].includes(active.tagName.toLowerCase())){
        // execute your code here
    }
});
1 голос
/ 12 февраля 2020

Дайте текстовым полям (я предполагаю <input type="text">) класс, такой как myClass. Итак, теперь у вас есть: 

<input type="text" class="myClass">

Затем вы можете проверить с помощью jQuery следующим образом: 

if (!$( document.activeElement ).hasClass("myClass")

Пример: 

$(document).ready(function() {
  $(":input").click(test1);
  function test1() {
    if (!$(document.activeElement).hasClass("myClass")) {
      console.log("Does not have myClass");
    } else {
      console.log("has myClass");
    }
  }
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Example</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
 <input type="text" class="myClass" value="myClass">
 <input type="text" class="myClass" value="myClass">
 <input type="text" class="differentClass" value="differentClass">
</body>
</html>
0 голосов
/ 12 февраля 2020

Ну, по умолчанию курсор находится внутри текстового поля, если он имеет фокус, поэтому вы можете проверить, имеет ли указанный текстовое поле c фокус, с помощью $("..").is(":focus").

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

Нет похожих вопросов

...