Capture image element 'onkeyup' event

Question

I need to capture an onkeyupevent on an image element. Here's the markup for that element:

<input class="globalbuttons" type="image" alt="save" title="save"
  onclick="resetScrollPosition(); tabindex="0" 
  src="/kc-dev/kr/static/images/buttonsmall_save.gif" 
  name="methodToCall.save">

The reason is to force all users to use the mouse and CLICK the button, rather than allow the user to tab into the image and press Space or Enter to emulate a mouse click.

I got the following simple test to work:

<input class="globalbuttons" type="image" alt="save" title="save"
 onclick="resetScrollPosition(); tabindex="0"
 onkeyup="alert(event.keyCode);"
 . . .

The alert properly shows the key codes for every key that I press while the image remains in focus. Next, I tried replacing the alert with a function and passing the function the event, but this was not working.

Also, I'm wondering if this is the best approach:

1. Should I only ignore the key presses that could "emulate a click" (e.g. Space or Enter) .

   OR

2. Is better to not to discriminate the key that got pressed, but rather ignore ALL keys for this element?

Thanks.

Answer 1

I can't see a case for keeping only some keyups. So, what I recommend are two things.

Add tabindex="-1" to your input to remove it from 'being tabbed to' by default.

<input class="globalbuttons" type="image" alt="save" title="save" onclick="resetScrollPosition();" tabindex="-1" src="http://placehold.it/350x150" />

Return false on keyups for these elements.

function avoidKey() {
    /* keyCode logic if you decide to go that route */
    return false;
}

var gb = document.getElementsByClassName('globalbuttons');
for (var i=0; i < gb.length; i++) {
    // Would be better to have a function that abstracts binding multiple events
    gb[i].addEventListener('keyup', avoidKey, false);
    gb[i].addEventListener('keypress', avoidKey, false);
    gb[i].addEventListener('keydown', avoidKey, false);
}

Browser support for getElementsByClassName()

Might be easier to go the jQuery route and just use $('.globalbuttons').on('keyup keydown keypress', function() { });