Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

OnKeyPress???? 3

Status
Not open for further replies.
Mighty

Mighty

Programmer
Feb 22, 2001
1,682
US
Hi Folks,

I have an Intranet page which is part of a bespoke CRM system. On the home page I have a long list of customers sorted alphabetically. I was wondering if there is any way that I can code it so that if the user presses a letter on the keyboard the page will automatically scroll to the first company that begins with that letter - similar to a listbox.

Can this be done?

Mighty
 
Sort by date Sort by votes
Hey dan,

At the moment, it is just a table with each company in it's own row of the table.

Mighty
 
Upvote 0 Downvote
Assign an id to the first row for each letter in the company. Then use the scrollIntoView method to scroll to that company. You can capture the onkeypress event to find out what letter they are pressing:
Code: 
<html>
<head>
<script language="JavaScript">

function scrollToCompany(e) {
   e = (e) ? e : event;
   var keycode = (e.keyCode) ? e.keyCode : (e.which) ? e.which : false;
   document.getElementById("first" + String.fromCharCode(keycode)).scrollIntoView();
   e.returnValue = false;
}

document.onkeydown = scrollToCompany;

</script>

<style type="text/css">

table tr {
   height:100px;
   vertical-align:middle;
}

</style>

</head>

<body>
<table border="1">
   <tr id="firstA"><td>Company A1</td></tr>
   <tr><td>Company A2</td></tr>
   <tr id="firstB"><td>Company B</td></tr>
   <tr id="firstC"><td>Company C</td></tr>
   <tr id="firstD"><td>Company D</td></tr>
   <tr id="firstE"><td>Company E1</td></tr>
   <tr><td>Company E2</td></tr>
   <tr id="firstF"><td>Company F</td></tr>
   <tr id="firstG"><td>Company G</td></tr>
   <tr id="firstH"><td>Company H</td></tr>
   <tr id="firstI"><td>Company I</td></tr>
   <tr id="firstJ"><td>Company J</td></tr>
   <tr id="firstK"><td>Company K1</td></tr>
   <tr><td>Company K2</td></tr>
   <tr id="firstL"><td>Company L</td></tr>
   <tr id="firstM"><td>Company M1</td></tr>
   <tr><td>Company M2</td></tr>
   <tr><td>Company M3</td></tr>
   <tr id="firstN"><td>Company N</td></tr>
   <tr id="firstO"><td>Company O</td></tr>
   <tr id="firstP"><td>Company P</td></tr>
   <tr id="firstQ"><td>Company Q</td></tr>
   <tr id="firstR"><td>Company R</td></tr>
   <tr id="firstS"><td>Company S1</td></tr>
   <tr><td>Company S2</td></tr>
   <tr id="firstT"><td>Company T1</td></tr>
   <tr><td>Company T2</td></tr>
   <tr id="firstU"><td>Company U</td></tr>
   <tr id="firstV"><td>Company V</td></tr>
   <tr id="firstW"><td>Company W</td></tr>
   <tr id="firstX"><td>Company X</td></tr>
   <tr id="firstY"><td>Company Y</td></tr>
   <tr id="firstZ"><td>Company Z</td></tr>
</table>
</body>
</html>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
nice one kaht, any reason for the 'first' though , seems like extra keystrokes to me id="A" , id="B" , etc.. ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
kaht,

That is working a treat with just one problem - what happens if the user presses a key other than a letter. Maybe they want to Alt-tab out of the browser - it gives an error message as it can't find "firstAlt" - or whatever.

Is there any way that I can check if an element by a name exists before trying to scroll to it?

Mighty
 
Upvote 0 Downvote
you've asked the right person here, sexy kaht i'm sure will be able to give you a sexy regex to check that the key pressed was [0-9][a-z] :)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Well... if it has to be sexy, then here you go:
Code: 
function scrollToCompany(e) {
   e = (e) ? e : event;
   var keycode = (e.keyCode) ? e.keyCode : (e.which) ? e.which : false;
   if (/^[A-Z0-9]$/.test(String.fromCharCode(keycode))) {
      document.getElementById("first" + String.fromCharCode(keycode)).scrollIntoView();
   }
   e.returnValue = false;
}

Although, that's a pretty simple regex [smile]

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
so am I right in saying ^[A-Z0-9]$ means ^ any of the following A-Z0-9 at the start $ of the string?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
[ol]
[li]/ starts the regex[/li]
[li]^ means start of the string[/li]
[li][A-Z0-9] means any character between A and Z, or any number between 0 and 9[/li]
[li]$ means end of the string[/li]
[li]/ ends the regex[/li]
[li]and test is a regexp method[/li]
[/ol]

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Upvote 0 Downvote
oh - thanks, I always thought ^ meant any of the following. or is NOT including if it's inside the square brakets?

[^0-9]

maybe i'm getting mixed up with PERL regex, or maybe i'm just dumb!



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
nope it's the latter , i'm just dumb
Code: 
$string =~ m/^sought_text$/;

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Kaht,

Thanks a million - that works a treat. Added one other modification to check to see if any companies with the selected letter actually exist:

Code: 
if (/^[A-Z0-9]$/.test(String.fromCharCode(keycode)) && document.getElementById(String.fromCharCode(keycode))) {
    document.getElementById(String.fromCharCode(keycode)).scrollIntoView();
}

Mighty
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

milo3169
  • Locked
  • Question
onkeypress will change the style class but changes back.
Replies
0
Views
20
milo3169
milo3169
TurboSRT4
  • Locked
  • Question
onkeypress event with prompt()
Replies
2
Views
44
dkdude
dkdude
TurboSRT4
  • Locked
  • Question
help disallowing characters onkeypress
Replies
15
Views
82
feherke
feherke
JA3395
  • Locked
  • Question
I can't get onKeyPress or onKeyDown to work in Firefox 1
Replies
2
Views
43
JA3395
JA3395
keoflex
  • Locked
  • Question
Javascript/ Firefox onKeyPress event error
Replies
6
Views
46
Kirsle
Kirsle

Part and Inventory Search

Sponsor

Back
Top