Question

I have a web app which plots points with SVG, I want to add the ability to delete a selected point by pressing the delete key. I can capture delete keydown (or up) for the entire document and prevent the default event (Chrome’s default behavior is to go back a page), however this obviously blocks all delete events so the delete button no longer works in forms.

Is there a way to set it up so that the delete key works as intended in forms/inputs but when anywhere else in the app it can be used as a custom delete function?

Answer 1

The first thing that came into my mind, is to stopPropagation on the input and textarea fields, then the preventDefault should not be triggered on the document.

JQuery pseudo code:

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

Another possiblity is the check the orignal target on the key event of the document.

Event callback:

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

The first line should be obsolete, if you are using jQuery, because it normalized the event for you, and you can use e.target to get the originalTarget