Autotabbing Numeric Fields with JavaScript

Now, I don’t really care for autotabbing form fields because I use the Tab key extensively when filling out forms and autotabbing breaks expected behavior and I always end up having to Shift+Tab to get back to the field I want to fill out. But what is even worse is when I mistype information in an autotabbed field and Shift+Tab takes me back to my mistake, only to be autotabbed yet again to the next field. That is what today’s post is about. One of the sites I am in charge of has autotabbed phone number fields and every so often I find myself hitting Shift+Tab to move back to an autotabbed field (even when I don’t make a mistake, I just want to get to a field above it) and I am thrown out. What do I do then? Well, normally, I pound on the Shift+Tab keys about four more times to try and tell the application I know what I am doing, only to have it not listen to me, before I give up and use the mouse. So, as a part of the next iteration of this application, I re-wrote the autotab JavaScript I inherited so that it allows the user to do what they want (re-focus the field when it already has data in it) without complaint, while maintaining the autotab nature of the phone number fields. Oh, I also made the autotab function gracefully degrade and only tab when the form field value is a string of integers (like a phone number is).

The Numeric Autotab function:

function doNumericAutotab( e )
{
  var elm;
  
  if ( window.event && window.event.srcElement )
  {
    elm = window.event.srcElement;
  }
  else if ( e && e.target )
  {
    elm = e.target;
  }
  
  // Return if we don't find the target element or non-numeric key is pressed.
  if ( !elm || !( ( 48 <= e.keyCode && e.keyCode <= 57 ) || ( 96 <= e.keyCode && e.keyCode <= 105 ) ) ) return;
  
  var numeric = RegExp("^\\d{" + elm.maxLength + "}$");
  
  if ( elm.value.match(numeric) != null )
  {
    var el = nextElement( elm );
    if ( el != null )
    {
      try
      {
        el.focus();
      }
      catch ( err )
      {
        // Catch Mozilla exception when new focus field has autocomplete data.
      }
    }
  }
}

So, how does this code work? The first block in the code is the setup. It tries to find the element that called the function. Then, the code checks to see if the element was found, or if a non-numeric key was pressed (we are attaching the doNumericAutotab to an input fields keyup event) because we only want to autotab when the field is full of numeric characters and we don’t want to waste time checking if we know something non-numeric was pressed. This brings us to field validation. A regular expression (RegExp) is created based on the input field’s maxLength attribute and the form will only autotab if the value of the field is a string of numbers the same length as the maximum allowed length. If it is, then we try to get the next form field and focus on it.

Note: as for graceful degradation, see the source code for how I apply the function to the form field’s keyup event. This function requires the nextElement function from the source to work properly.  

My first pass through the autotab function was to just filter out the Tab and Shift key codes (9 and 16 respectively), but then what happens if the user wants to use the arrow keys? On an arrow keyup, the field would autotab. Once you get to arrow keys, then what about Home or End or any of the other functional keys? There is only a finite set of function keys (keys other the alphanumeric keys), so we may be able to filter them all out, but then our code starts to get ugly… and what about international support? So, right now I am left with Numeric Autotab, in the future I may post an updated Generic Autotab.

Update: see Autotabbing with JavaScript for a description of generic autotabbing.

autotab.js – to use: include the autotab.js file in the head of your document, and add the class autotab to the fields you want to autotab.

Update: source code updated to include generic autotabbing.

Wedding Photo Proofs

Anyone who is interested, our Wedding Picture Proofs are now available online to browser and purchase. Directions to get to the proofs are outlined in the email I received from Timothy Whaley & Associates:

Dear Family & Friends:

Timothy Whaley & Associates, our official wedding photographer, would like to provide instructions on how to view proofs and order photographs from our wedding.

  1. Please visit: http://www.twaphoto.com
  2. Click on: "Weddings"
  3. Click on: "Photo Proof Login"
  4. Click on: "Wedding Day Proofs"
  5. Click on: "After 12/27/06"
  6. Select our last names from the client list and enter our wedding date, 8/4/2007, as the password in the following format: MMDDYY

You will be able to view and order any of the photographs from our wedding day, directly from the website. Orders will be shipped to you approximately 2 to 3 weeks from the date placed. If you are interested in obtaining information on additional products offered by our studio, please call 630-271-1737 and speak with Kristina.

Thank you for sharing our special day with us and we hope you find this internet feature a great way to order cherished memories of our day!

Thank you!

-- per email from Kristina Manno, Personal Studio Consultant with Timothy Whaley & Associates

You could follow all of those steps, or you can go to the Erickson-Sepcot Gallery login page directly. Enter the password 080407 and (unfortunately) your Name and Email Address to enter the gallery.

Wedding Songs

Everybody we have talked to had a great time at our wedding. One of the things they enjoyed the most was the music provided by An Enchanted Evening. Because I feel like it, here is a listing of the important songs of the night:

Stephanie and I would like to extend our thanks to her uncle, Donald J. Erickson, Jr. for singing and family friend, Jim Hall for playing the music during the wedding ceremony.

Honeymoon in Kauai

I'm officially married!

Our wedding (Saturday, 4th of August 2007) went fairly smoothly. There were little issues that arose throughout the day: pictures began a half hour late, the dessert wasn't what we had ordered, the DJ didn't play an Anniversary Song or Dollar Dance Song... but we were able to get all of our pictures in, everybody complemented our choice of food and music, so all-in-all the night went by smoothly.

We took Sunday off to relax, have dinner with our parents, and open wedding gifts.

We had packed for our honeymoon on Thursday so we wouldn't have to be running around after our wedding trying to find stuff to bring, so when we woke up Monday morning, all we had to do was double check we had everything we needed, and get a ride to O'hare Airport. We left Chicago around 12:30 PM CDT, had a layover in San Francisco for a few hours, and finally landed at Lihue Airport on Kauai Island, Hawaii around 8:00 PM HST.

While in Kauai, we went on a Helicopter Tour of the Island, took a Zodiac tour of the Na Pali Coast, and went to a Luau in between driving all around the island and sitting on the beach, soaking up the sun. We saw a Red Eyed Crab, some Spinner Dolphins, a White-Tipped Shark, and one of the sets of the new Ben Stiller comedy: Tropical Thunder. The weather and the landscape were beautiful, I took over 600 pictures while we were there (so keep an eye on my Flickr account over the next few weeks for photos).

The only thing I didn't like was sitting in the airplanes for 4+ hours each trip (Chicago to San Francisco, San Francisco to Lihue, Lihue to Los Angeles, Los Angeles to Chicago), and even that was bearable because I got to see 4 movies I had not seen before: Spiderman 3 (not as good as the other two), Fracture (good, but predictable),The Hoax (good movie), and Shrek the Third (good movie).

There is too much to talk about right now, so stay posted for more details. :-)

Update: August 27, 2007

Stephanie and I spent about a week in Kauai Island, Hawaii (6-12 August 2007) for our honeymoon. While there I took a few pictures... over 600 of them. Anyway, they are up on my Flickr page in my Kauai Set, so go have a look :-)

Wedding this Weekend

Four more days to go and I am already burnt out. I just finishing up putting final touches to what will become the Wedding Program, and there are still countless things left to do. I still need to find groomsmen gifts, create and print up the place cards... We need to make our final payment to the reception hall, put our wedding favors together... The list is long, but I can see the light at the end of the tunnel - resting for a week in Kauai :-).

Tomorrow marks the day most of the family members start coming in (a few are already in for a family vacation). It also marks the day we start getting to make numerous trips back and forth between the city and the suburbs. I am tired already and the week has not even begun. Final payment is being made tomorrow, Stephanie's bachelorette party is on Thursday, Rehearsal and Dinner on Friday, Wedding on Saturday, and somewhere in between working and driving we need to wrap up all of the loose ends. At least we gave ourselves a day to rest before the 12-hour flight down to Kauai on Monday...