Spacebar key press on anchor html element doesn't trigger click event. How to let this happen?

Question

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"/><span>Save & Add Another</span></a>

I have the above anchor element in my page. This one is styled to look like a button and so will be treated as a button. The problem is as follows. The user doesn't want to use mouse to click on it or reach it, but he will use the tabbing to highlight this anchor element and then will use "spacebar" or "return" keys to click on it. If the user hits on spacebar or return key I should be able to call a JavaScript function. I tried the onkeypress event and that doesn't help. Any idea?

Solution

First: there's a problem with your HTML. You're using the short syntax for the A -- meaning that the text isn't actually part of the A content. Many browsers don't like the short syntax for A tags anyway -- not your fault, but it's our job to be more tolerant than browsers are.

Here's the corrected version:

<a tabindex="7" style="cursor: pointer;" class="button" id="saveTocAddNew" onClick="saveTdsAddNew();"><span>Save & Add Another</span></a>

Depending on the browser and DOCTYPE, it is significant whether the event name is all lowercase or not. Just something to look for.

Finally, by default your onclick event will only fire for clicks and Enter -- not for spacebar. Many browsers treat the spacebar as a pagedown thing. If you are sure you want to capture spacebar events on this A and treat them like Enter, you'll need to define a keypress event that looks for spacebars. Like so:

function addNewKeys(event) {
    if(!event) var event = window.event; // cross-browser shenanigans
    if(event.keyCode === 32) { // this is the spacebar
        saveTdsAddNew(event);
    }
    return true; // treat all other keys normally;
}

(Remember to bind this new function to the onkeypress of that A.)

Note that I'm passing the event to the saveTdsAddNew function. That's because I think event handlers normally receive the event object as their argument, so this preserves the existing pattern. From the event, you can retrieve the element that was clicked/keyed-on, etc.

Comments

[reddyvaribabu]

I was not noticing that the A tag is closed already once, while there was another close after that. When removed the first close, it worked great...

[AlexGad]

Agree with this comment - the above does not work reliably because the keypress is not an event across all browsers for anchors. If this button is styled like a button, why not use the button element, which does properly receive the keypress event?