homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Cancel JavaScript Keyboard event for SHIFT+TAB but not TAB?
JAB Creations

WebmasterWorld Senior Member jab_creations us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3073155 posted 7:46 am on Sep 6, 2006 (gmt 0)

When a user uses the TAB key to navigate on this example it will change the class on a div with a certain ID. However what I would like to do is not change that class should the user press SHIFT+TAB on that anchor. I still want TAB alone to execute that function however.

For JavaScript references...
Key Pressed // JavaScript Key Code
Tab // 9
Shift // 16

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Cancel TAB for onkeypress JavaScript Event</title>
<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
//]]>
</script>
<style type="text/css">
a:focus {
background: #222;
color: #fff;
}
div.prompt {
display: none;
}
div.showme {
border: #000 solid 1px;
}
</style>
</head>

<body>

<p>The goal of modifying this script to to make any key other then tab

<br />
<a href="#" onkeypress="if (event.keyCode == 9) return true; else change('hiddenlayer', 'showme');">anchor one (press TAB)</a>
<br />
<a href="#" onkeypress="if (event.keyCode === 16) return true; else change('hiddenlayer', 'showme');">anchor two (press SHIFT+TAB)</a>
<br />
<a href="#" onkeypress="if (event.keyCode == 9) return true; else change('hiddenlayer', 'showme');">anchor three (press TAB)</a>

<div class="prompt" id="hiddenlayer">A hidden layer</div>

</body>
</html>

- John

 

RonPK

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3073155 posted 2:27 pm on Sep 6, 2006 (gmt 0)

Me thinks IE does not capture the Tab or the Shift key. Simple test:

<textarea onkeypress="alert(event.keyCode)" cols=20 rows=5></textarea>

Nothing happens when I press Shift (or Tab).

penders

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 3073155 posted 7:36 am on Sep 7, 2006 (gmt 0)

... IE does not capture the Tab or the Shift key.

I think you need to use the onkeydown/onkeyup events in order to capture the TAB or SHIFT keys. (FF does not capture the SHIFT key in the onkeypress event, and like Ron says, IE doesn't seem to capture either.)

How do you trap SHIFT + TAB together?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved