In Step 7 of my Top100-application, I wanted to be able to enter a number and press ENTER, to immediately go to that specific number in the list. This is very similar to the ability in PowerPoint to move to a specific slide by just typing the slide number and pressing ENTER in Slide Show mode.
That piece was pretty easy with jQuery:
var newnumber = ''; // string to store numbers typed on keyboard$(document).keyup(function(e) { if ( (e.keyCode>=48) && (e.keyCode<=57) ) { // numbers (0..9) newnumber = newnumber+(e.keyCode-48); }
switch ( e.keyCode ) { case 13: // ENTER // switch to newnumber (if newnumber is number <= 100) var n = parseInt(newnumber); if ( (n>0) && (n<=100) ) { currentnumber = n; // same effect as down-key $("#mainp").hide("slide", { direction: "left" }, 1500, function(){ colornumber = currentnumber % bgcolors.length; $("#mainp").css("background-color",bgcolors[colornumber]); $("#mainp").css("color",textcolors[colornumber]); $("#number").text(currentnumber); $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase()); $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase()); $("#mainp").show("slide", { direction: "right" }, 1500, function(){ $("#number").effect("pulsate", { times:5 }, 1500); }); }); } newnumber = ''; break;
This worked, but only when using the numbers at the top of the keyboard. From the Keyboard Events page on Javascript Madness I learned that the keyCodes for the numbers on the numeric keypad are different (well, in IE, FireFox, Safari and Chrome, not in Opera): pressing the 1 key at the top results in keyCode 49, pressing 1 on the numeric keypad results in 97. So I had to add another series of keyCodes (96..105).
Also, I noted that when I started with a 0, I did not get the result I expected. Typing 055 ENTER resulted in number 45 being shown. After looking at Converting Javascript strings to numbers at the Javascript FAQ website, I realized the 0 at the start makes Javascript interpret it as an octal. So I included some code for that as well:
if ( (e.keyCode>=48) && (e.keyCode<=57) ) { // numbers (0..9) if ( !((e.keyCode==48) && (newnumber == '')) ) // don't start with 0 --> will be interpreted as octal { newnumber = newnumber+(e.keyCode-48); } } else if ( (e.keyCode>=96) && (e.keyCode<=105) ) { // numbers (0..9) on numeric keypad if ( !((e.keyCode==96) && (newnumber == '')) ) // don't start with 0 --> will be interpreted as octal { newnumber = newnumber+(e.keyCode-96); } }
The final addition I made was support for the BACKSPACE key. If you accidentally typed the wrong number, pressing BACKSPACE would erase all input:
switch ( e.keyCode ) {
...
case 8: // backspace
// reset newnumber
newnumber = '';
break;
♦ Related files: step7.html