Захват события нажатия клавиши (или нажатия клавиши) на элементе DIV

146

Как перехватить событие нажатия клавиши или нажатия клавиши на элементе DIV (используя jQuery)?

Что требуется, чтобы сосредоточиться на элементе DIV?

— Lalchand
источник

Что означает «фокус» для div?

— Джонатон Фауст

Если вы не используете табуляции, когда у него есть tabindex, вы можете использовать javascript, чтобы найти его и вызвать для него метод focus.

— Брендан Энрик

@Lalchand ... можешь когда-нибудь принять мой ответ? :)

— helle

Ответы:

301

(1) Установите tabindexатрибут:

<div id="mydiv" tabindex="0" />

(2) Привязать к keydown:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

Чтобы установить фокус на старте:

$(function() {
   $('#mydiv').focus();
});

Чтобы удалить - если вам это не нравится - divграницу фокуса, установите outline: noneв CSS.

Посмотрите таблицу кодов клавиш для большего количества keyCodeвозможностей.

Весь код предполагает, что вы используете jQuery.

— Хелле
источник

+1 tabindex является ключевым моментом, чтобы сделать div «выбираемым». JQuery не требуется, то же самое работает с Angular, а также (я полагаю) с обычными событиями JavaScript.

— Юкка Далбом

Какая поддержка браузера для этого?

— известноасиля

tabindex является ключевой частью, но не устанавливайте для него значение, отличное от «0». Если значение будет больше 0, это может испортить программы чтения с экрана для слабовидящих пользователей (оно пропустит все на странице и сразу перейдет к любому tabindex выше 0). tabindex = "0" делает его "tabbable." Вы можете иметь бесконечные элементы с tabindex = "0"

— zonabi

Также работает с <pre>!

— dfmiller

Превосходно! Мне не хватало атрибута tabindex, возможно, потому что DIV не могут получить фокус, если у них нет tabindex. Спасибо чувак! Спас мою жизнь! РЕДАКТИРОВАТЬ: работает также с React

— Vinícius Negrão

Вот пример на простом JS:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})

#myDiv {
  outline: none;
}

<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Развернуть фрагмент

— Илья Зеленько
источник

Как это отвечает на вопрос?

— Пол Бак

HTML-атрибут tabindex указывает, может ли быть сфокусирован его элемент, и если / где он участвует в последовательной навигации по клавиатуре (обычно с помощью Tabклавиши). Читайте MDN Web Docs для полной справки.

Использование Jquery

Показать фрагмент кода

$( "#division" ).keydown(function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
});

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="division" tabindex="0"></div>

Развернуть фрагмент

Использование JavaScript

Показать фрагмент кода

var el = document.getElementById("division");

el.onkeydown = function(evt) {
    evt = evt || window.event;
    console.log("keydown: " + evt.keyCode);
};

#division {
  width: 90px;
  height: 30px;
  background: lightgrey;
}

<div id="division" tabindex="0"></div>

Развернуть фрагмент

— nkshio
источник

Я действительно обнаружил, что это связано с тем, что возникает проблема с событием focusout, когда элементы управления div теряют фокус, скажем, чтобы щелкнуть по полосе прокрутки divs, просто добавление табуляции в div было исправлением, так что большое спасибо

— MikeT