Захватить клавишу удаления, если она не сфокусирована на форме - PullRequest
0 голосов
/ 14 ноября 2011

У меня есть веб-приложение, которое отображает точки с помощью SVG. Я хочу добавить возможность удалять выбранную точку, нажимая клавишу delete .Я могу записать delete keydown (или вверх) для всего документа и предотвратить событие по умолчанию (по умолчанию Chrome возвращает страницу назад), однако это, очевидно, блокирует все события удаления, поэтому delete *Кнопка 1006 * больше не работает в формах.

Есть ли способ настроить ее так, чтобы клавиша delete работала так, как задумано в формах / входах, но когда где-либо еще в приложении она можетиспользоваться как пользовательская функция удаления?

Ответы [ 2 ]

2 голосов
/ 14 ноября 2011

Мой предпочтительный подход будет выглядеть примерно так:

$(window).keyup(function(e) {
  if(e.keyCode == 46 && $("input:focus, textarea:focus").length == 0) {
    e.preventDefault();
    alert("delete key pressed!");
  }
});

Однако я не уверен, сможете ли вы переопределить поведение кнопки возврата - кажется маловероятным, что Chrome позволит это,учитывая возможность злоупотребления.

2 голосов
/ 14 ноября 2011

Первое, что мне пришло в голову, это stopPropagation в полях input и textarea, тогда preventDefault не должен запускаться на document.

JQuery.псевдокод:

$('input, textarea').keypress(e, function(e){e.stopPropagation();});
$(document).keypress(e, function(e){if(delete) e.preventDefault();});

Другой возможностью является проверка целевого объекта по ключевому событию документа.

Обратный вызов события:

var originalElement = e.srcElement || e.originalTarget;
if(orignalElement.tagName === 'INPUT' or orignalElement.tagName === 'TEXTAREA'){ return; }
// else do your delete key stuff

Первая строка должнаустареть, если вы используете jQuery, потому что это нормализовало событие для вас, и вы можете использовать e.target, чтобы получить originalTarget

...