Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

<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?

like image 966
reddyvaribabu Avatar asked Jul 26 '11 23:07

reddyvaribabu


People also ask

Does Onclick work on anchor tag?

Yes, onclick will work with any html element.

How do you anchor an element in HTML?

<a>: The Anchor element. The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address. Content within each <a> should indicate the link's destination.


1 Answers

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.

like image 197
Tom Avatar answered Sep 21 '22 17:09

Tom