Capturing the onkeydown event

richard.york · May 20th, 2005, 03:26 PM

I'm writing a corporate intranet-based CMS. I'm trying to capture the onkeydown event to create keyboard shortcuts. Below I'm adding the "ctrl + s" keyboard shortcut to save information.

Code:

function register_hotkeys(e)
{
    //alert(e.keyCode +  " : " + String.fromCharCode(e.keyCode));
    if (e.ctrlKey && e.keyCode == 83) // 83 == s, see if ctrl + s is being pressed
    {
        document.getElementById('control-panel-form').submit();
    }
    return false;
}

window.onkeydown = register_hotkeys;

I've googled extensively on creating keyboard shortcuts, but can't seem to find anything that discusses overriding default, built-in shortcuts, such as ctrl+s, as is the case in the example here. When I run this the form submits, but the default "save page as" dialog of Firefox still fires off.

This app is Gecko-only, so I'm looking for a solution that will be compatible with Mozilla, et all. Not too interested in Explorer, but I wouldn't mind hearing about a method that works in Explorer.

Is there a solution, or is this a fruitless quest?

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

nzakas · May 27th, 2005, 03:13 PM

I'm not sure if it's possible, but if it is, you'd need to prevent the default action of the event:

Code:

function register_hotkeys(e)
{
    //alert(e.keyCode +  " : " + String.fromCharCode(e.keyCode));
    if (e.ctrlKey && e.keyCode == 83) // 83 == s, see if ctrl + s is being pressed
    {
        document.getElementById('control-panel-form').submit();
    }
    //return false;
    e.preventDefault();
}

Nicholas C. Zakas
Author, Professional JavaScript for Web Developers (ISBN 0764579088)
http://www.nczonline.net/

richard.york · May 31st, 2005, 03:35 PM

Thanks for your input Nicholas, I'll try it out and report the results.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

joefawcett · June 3rd, 2005, 10:39 AM

I actually tried a number of options but none worked. If you test event.isCancelable you'll see that it's not so preventDefault doesn't work. You can gget your function to fire but the default save still appears.

--

Joe (Microsoft MVP - XML)

richard.york · June 3rd, 2005, 11:21 AM

Thanks Joe, I haven't been able to come back around to this application for a while, so I haven't tried anything else yet. I might try posing my question on one of the Mozilla newsgroups. Perhaps there's some XUL voodoo I can invoke.

If I discover anything new I'll post my findings.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design

richard.york · December 27th, 2005, 04:27 PM

UPDATE: e.preventDefault(); works to cancel the appearance of the save as dialogue in Firefox 1.5. This also cancels the default event for any key press, including typing text into a text box. So, the best way to incorporate it is as follows.

Code:

function register_hotkeys(e)
{
    if (e.ctrlKey && e.keyCode == 83) // 83 == s, see if ctrl + s is being pressed
    {
        document.getElementById('control-panel-form').submit();
        e.preventDefault();  // No "save page as" dialogue!
    }
}

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design