title: Capture image element 'onkeyup' event
body: <p>I need to capture an <code>onkeyup</code>event on an image element. Here's the markup for that element:</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>
  
  <p>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 <kbd>Space</kbd> or <kbd>Enter</kbd> to emulate a mouse click.</p>
  
  <p>I got the following simple test to work:</p>
  
  <pre><code>&lt;input class="globalbuttons" type="image" alt="save" title="save"
   onclick="resetScrollPosition(); tabindex="0"
   onkeyup="alert(event.keyCode);"
   . . .
  </code></pre>
  
  <p>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.</p>
  
  <p>Also, I'm wondering if this is the best approach:</p>
  
  <ol>
  <li><p>Should I only ignore the key presses that could "emulate a click" (e.g. <kbd>Space</kbd> or <kbd>Enter</kbd>) .</p>
  
  <p>OR</p></li>
  <li><p>Is better to not to discriminate the key that got pressed, but rather ignore ALL keys for this element?</p></li>
  </ol>
  
  <p>Thanks.</p>