jQuery - Trigger click event on links with spacebar?

Herb Caudill picture Herb Caudill · Mar 12, 2010 · Viewed 7k times · Source

It looks like in most browsers, an <input type="submit"> treats both [spacebar] and [enter] as a click, but an <a> link only treats [enter] as a click.

My app uses a number of links formatted to simulate buttons, so a user that is accustomed to tabbing to a button and pressing [spacebar] will be frustrated.

This bit of jQuery solves the problem:

$("a.Button").die("keypress").live("keypress", function(e) {
    if (e.which == 32) {
        $(this).trigger("click");
        e.preventDefault();
    }
});

My question: Is there a reason not to do this? I'm a little reluctant to override the browser's default behavior on something as basic as this, but since I'm already abusing the link tag to make it look like a button, at least this way I'm not violating the user's expectations any further.

Answer

Andy picture Andy · Mar 12, 2010

I think the most important standard to maintain is not the browser's behaviour, but rather the user's expected response.

If you have overriden the display of links by turning them into buttons, the user must be able to treat those "buttons" exactly as they would if it were a real button, otherwise you will confuse and irritate users who have spent years with this "learnt" behaviour.