jQuery: Keypressed and keydown event propagation in IE and Firefox

I’m working on a project where I have a button which starts some processing when pressed and wanted to add a keyboard shortcut (Ctrl-E) to also trigger this processing.

The processing on click is handled like this:

$("#evaluate").click(function () {
    ...
});

Now I first implemented the keyboard shortcut using a keypressed event:

$(document).bind('keypressed', function (event) {
	if (event.ctrlKey || event.metaKey) {
		switch (String.fromCharCode(event.which).toLowerCase()) {
			case 'e':
				$("#evaluate").click();
				return false;
		}
	}
});

Unfortunately, this does work in Firefox but not in Internet Explorer (the click is not triggered). For it to work in Internet Explorer, you need to use keydown instead of keypressed. So I changed it to look like this:

$(document).bind('keydown', function (event) {
	if (event.ctrlKey || event.metaKey) {
		switch (String.fromCharCode(event.which).toLowerCase()) {
			case 'e':
				$("#evaluate").click();
				return false;
		}
	}
});

Now it works in IE and Firefox. The only problem left was that in Firefox, the event is further propagated. In this case, the search box is activated.

I first thought I needed to add an event.preventDefault() and/or event.stopPropagation() but it didn’t help. The trick is actually to add a keypressed event handler which will return false if Ctrl-E is pressed:

$(document).bind('keydown', function (event) {
	if (event.ctrlKey || event.metaKey) {
		switch (String.fromCharCode(event.which).toLowerCase()) {
			case 'e':
				$("#evaluate").click();
				return false;
		}
	}
});
$(document).bind('keypressed', function (event) {
	if (event.ctrlKey || event.metaKey) {
		switch (String.fromCharCode(event.which).toLowerCase()) {
			case 'e':
				return false;
		}
	}
});

Now it works in both IE and Firefox !

Email this to someoneShare on FacebookShare on Google+Share on LinkedInDigg thisShare on RedditShare on StumbleUponTweet about this on TwitterBuffer this page

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>