Experimenting with Adobe AIR and jQuery – Part 7

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.