I tried preventDefault() but I haven't had success. Is there something that I'm missing?

I would try to disable it globally, if possible (like registering the events on window)

I tried preventDefault() but I haven't had success. Is there something that I'm missing?

I would try to disable it globally, if possible (like registering the events on window)

• javascript
• html
• dom
• accessibility
• wai-aria

Share Improve this question Follow edited Feb 24, 2022 at 21:16 TylerH 21.1k7878 gold badges7979 silver badges114114 bronze badges asked Mar 26, 2014 at 19:03 user652649user652649 6

• key bination is platform dependent, but i'm talking of html accesskeys – user652649 Commented Mar 26, 2014 at 19:15
• 1 Why not just remove the attributes? – Teemu Commented Mar 26, 2014 at 19:19
• i think that would affect accessibility... is that the only option? – user652649 Commented Mar 26, 2014 at 19:32
• 1 Ehh...? Would it just have the same affect as preventDefault() (assuming preventDefault() would have been working)? Attributes can be removed/returned with JS, you don't have to remove them from the file, if that's your point. – Teemu Commented Mar 26, 2014 at 19:38
• 2 Your solution will indeed affect the accessibility. Because a screen reader would say, for example, "Save button alt+S", but when the user presses alt+S, nothing would happen because of your preventDefault() or whatever. So just remove the accesskey attribute. – André Polykanine Commented Mar 26, 2014 at 20:26

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 11

There doesn't seem to be a way to stop the event from triggering. The only alternative seems to be to remove the accesskey attributes temporarily while you don't want them to work. That's what jQuery UI has to do for modal dialogs.

Here's the code from that thread:

$("#boxA-dialog").dialog({
    autoOpen: false,
    modal: true,
    height: 400,
    width: 300,
    open: function(event, ui) {
        ak = $('[accesskey]').each(function() {
            $(this).data('ak', $(this).attr('accesskey')).removeAttr('accesskey')
        })
    },
    close: function(event, ui) {
        ak.each(function() {
            $(this).attr('accesskey', $(this).data('ak'))
        })
    }
});

As you can see it's saving the accesskey attributes to jQuery data before removing them:

$(this).data('ak', $(this).attr('accesskey')).removeAttr('accesskey')

and then restoring them from the data:

$(this).attr('accesskey', $(this).data('ak'))

I'd be interested in a solution that actually prevents the event rather than using this workaround.

If I correctly understand your problem, you could try this.

$('[accesskey*=]').focus(function(e) { 
    // disable accesskey functionality 
});
$('[accesskey*=]').blur(function(e) { 
    // reenable accesskey functionality 
});

Using the previous answer, you can use this trick to "remove" all "accesskey" options from the page.

$('[accesskey*=]').attr('accesskey','');

Simply set all accesskey on the page for nothing.