Enter key triggering link

Question

I have a JQuery scroller on a page where each item is a div with an id. each div has a link to the next div in the scroller (all on the same page)

$('a.panel').click(function () {
};

I have a click event to all links with the 'panel' class where I check which links was clicked and then do some ajax processing accordingly:

 if($(this).attr('href')=="#item2")
{
//do some processsing 
}

and once the processing is done I use the scrollTo JQuery method to scroll to the next div

I need to have it that the user can press the enter key instead of clicking on the link. Now the problem is: a. I have several links on the same page that all need to have this behaviour. b. I need to differentiate which link triggered the click event and do some server-side processing.

Is this possible at all?

I appreciate the quick and helpful responses!!Thanks a million for the help!

I'm pretty sure focus + enter key will trigger `click()` already, are you sure this doesn't already work as expected? Or did I miss the point of the question? — Wesley Murch, Aug 04 '11 at 19:20
thanks for the response, I am not sure what you mean? do i need to set the focus? how does the work? — NinaNa, Aug 04 '11 at 19:21
What do you mean by `"I need to have it that the user can press the enter key instead of clicking on the link"`? Is there only one link? If so, are you just asking how to check if "enter" was pressed? — Wesley Murch, Aug 04 '11 at 19:22
i would like it that when the user clicks the enter on the keyboard it will work the same as using the mouse to click on the actual link — NinaNa, Aug 04 '11 at 19:24

score 8 · Answer 1 · answered Jan 20 '14 at 20:02

Focus + enter will trigger the click event, but only if the anchor has an href attribute (at least in some browsers, like latest Firefox). Works:

$('<a />').attr('href', '#anythingWillDo').on('click', function () {

    alert('Has href so can be triggered via keyboard.');

    // suppress hash update if desired
    return false;

}).text('Works').appendTo('body');

Doesn't work (browser probably thinks there's no action to take):

$('<a />').on('click', function () {
    alert('No href so can\'t be triggered via keyboard.');
}).text('Doesn\'t work').appendTo('body');

score 5 · Answer 2 · edited May 23 '17 at 12:08

You can trigger() the click event of whichever element you want when the enter key is pressed. Example:

$(document).keypress(function(e) {
    if ((e.keyCode || e.which) == 13) {
        // Enter key pressed
        $('a').trigger('click');
    }
});

$('a').click(function(e) {
    e.preventDefault();
    // Link clicked
});

Demo: http://jsfiddle.net/eHXwz/1/

You'll just have to figure out which specific element to trigger the click on, but that depends on how/what you are doing. I will say that I don't really recommend this, but I will give you the benefit of the doubt.

A better option, in my opinion, would be to focus() the link that should be clicked instead, and let the user optionally press enter, which will fire the click event anyways.

I would like to focus on the link, but am unfamiliar exactly how to do this, can you explain?

Just use $(element).focus(). But once again, you'll have to be more specific, and have a way to determine which element should receive focus, and when. Of course the user, may take an action that will cause the link to lose focus, like clicking somewhere else. I have no idea what your app does or acts like though, so just do what you think is best, but remember that users already expect a certain kind of behavior from their browsers and will likely not realize they need to press "enter" unless you tell them to.

If you do choose to use the "press enter" method instead of focusing the link, you'll likely want to bind() and unbind() the keypress function too, so it doesn't get called when you don't need it.

I would like to focus on the link, but am unfamiliar exactly how to do this, can you explain? (It might be a dumb question but I am not an expert in js) — NinaNa, Aug 04 '11 at 19:39

score 0 · Answer 3 · answered Aug 04 '11 at 19:25

0

Use e.target or this keyword to determine which link triggered the event.

$('a.panel').click(function (e) {
  //e.target or this will give you the element which triggered this event.
};

answered Aug 04 '11 at 19:25

ShankarSangoli

69,612
13
93
124

I use that already, I would like to add the they can press the enter key on the keyboard, and trigger the link – NinaNa Aug 04 '11 at 19:27

score 0 · Answer 4 · answered Aug 04 '11 at 19:35

0

$('a.panel').live('keyup', function (evt) {
    var e = evt || event;
    var code = e.keyCode || e.which;
    if (code === 13) {  // 13 is the js key code for Enter
        $(e.target).trigger('click');
    }
});

This will detect a key up event on any a.panel and if it was the enter key will then trigger the click event for the panel element that was focused.

answered Aug 04 '11 at 19:35

Alexander Kahoun

2,458
24
36

i will try this thanks :) what does the event "live" represent? will this trigger my click event and handle my conditions peroperly? in other words does it trigger the click event as if the user clicked on the actual link? dont I have to focus first on the link? I have a few links on the same page? – NinaNa Aug 04 '11 at 19:43
.live is jQuery method in the core jQuery plug-in that allows you to bind events to objects even when they haven't been rendered yet. The panel itself will need to have focus, just like your click event and yes it will trigger the click event as if the user clicked that particular panel. – Alexander Kahoun Aug 04 '11 at 19:46

Enter key triggering link

4 Answers4