Keyboard shortcuts with javascript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
adamb10
Forum Commoner
Posts: 91
Joined: Sat Jun 24, 2006 7:44 pm

Keyboard shortcuts with javascript

Post by adamb10 »

Is there a way to show/hide a table with a keyboard shortcut using javascript?
User avatar
aaronhall
DevNet Resident
Posts: 1040
Joined: Tue Aug 13, 2002 5:10 pm
Location: Back in Phoenix, missing the microbrews
Contact:

Post by aaronhall »

onKeyPress event and window.event.keyCode
adamb10
Forum Commoner
Posts: 91
Joined: Sat Jun 24, 2006 7:44 pm

Post by adamb10 »

Ok. I dont really know much(if any) javascript. :P
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

You may actually be able to do something with the accesskey attribute too.

I've used the actual event capturing stuff before now though by reading the ascii value stored in keypressEvent.keyCode.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

adamb10 wrote:Ok. I dont really know much(if any) javascript. :P

Code: Select all

function readKey(e)
{
    if (e.keyCode == 46) alert('Delete pressed!');
}

if (document.captureEvents) document.captureEvents(Event.KEYDOWN);
document.onkeydown = readKey;
adamb10
Forum Commoner
Posts: 91
Joined: Sat Jun 24, 2006 7:44 pm

Post by adamb10 »

ok, and what do I put in the table tag? Readkey?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

adamb10 wrote:ok, and what do I put in the table tag? Readkey?
No, let's say you wanted the "h" key to toggle the table display.

Code: Select all

function toggleTable(e)
{
    e = e || window.event;
    
    if (e.keyCode == 72) //Key code for h
    {
        var tableElement = document.getElementById('my_table');
        if (tableElement.style.display == 'block') tableElement.style.display = 'none';
        else tableElement.style.display = 'block';
    }
}

if (document.captureEvents) document.captureEvents(Event.KEYDOWN);
document.onkeydown = toggleTable;

Code: Select all

<table id="my_table" ... >
adamb10
Forum Commoner
Posts: 91
Joined: Sat Jun 24, 2006 7:44 pm

Post by adamb10 »

Thanks. That appeared to have worked. It does have a few bugs though. When you press h, the table gets skinny then pressing h again makes it go away. Pressing h again makes the table skinny.

http://adamb10.com/pb2/

Thanks!
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Post by jayshields »

Code: Select all

function toggleTable(e)
{
    e = e || window.event;
   
    if (e.keyCode == 72) //Key code for h
    {
        var tableElement = document.getElementById('my_table');
        if (tableElement.style.display == '') tableElement.style.display = 'none';
        else tableElement.style.display = '';
    }
}

if (document.captureEvents) document.captureEvents(Event.KEYDOWN);
document.onkeydown = toggleTable;
Might work
Post Reply