11 August 2012/Web

Auto Advancing Form Fields

Alright so this post will explain how to automatically take a user to the next input/form field upon completion of the last. This is meant for use with items that have a fixed/known length such as phone numbers, serial numbers, or any other input where the length is always going to be the same.

The Markup

Let’s start off with just a simple HTML page with three inputs for the different parts of a phone number. Please note that we have a maxLength attribute set for each form item which is necessary for us to know in the JavaScript that a field is full. Also included is our jQuery library and an empty script tag for our own JavaScript to run.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Auto Advance Text-Fields</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script></script>
  </head>

  <body>
    <p>
      Phone Number:
      <input name="phone1" type="text" maxlength="3" size="1" />
      <input name="phone2" type="text" maxlength="3" size="1" />
      <input name="phone3" type="text" maxlength="4" size="1" />
    </p>
  </body>
</html>

The JavaScript

So we can add our script to the empty scrip tag below our import of jQuery. Next in that script tag we will create an anonymous function that will execute as soon as the document is ready. We do this so we can be sure our inputs are available in the document before we try to add event listeners to them:

$(document).ready(function(){});

Now that we are sure our page will be loaded we can add an event listener to all of our inputs. We do so by using a jQuery selector for the inputs and the jQuery keyup() event. To tie the event handler to the input selector the code will look like so:

$('input').keyup();

Finally this is where we actually get to auto advance to through the form fields. Place the following code in between the () of .keyup(); so this happens every time the event is triggered. When that event is triggered we will test the length of the data typed in the input to the maxLength attribute set in the HTML. So first we need to get both of those values. So we can use jQuery functions to do so. To get the length of what has been input:

var characters = $(this).val().length;

To get the attribute of the input:

var maxLength = $(this).attr('maxLength');

this refers to the jQuery selector for the input in which the event was triggered. We wrap this in $() so we may use the jQuery functions .val() and .attr().

Now that we have both values we must simply test if the characters match the maxLength with an if statement and set the focus to the next input if true:

if( characters == maxLength){ $(this).next().focus();}

Clean up

Finally there is just one thing we can do to make our code more efficient and that is by storing $(this) into a variable for future use. Simply written:

var $this = $(this);

So the final JavaScript is as follows:

$(document).ready(function () {
  $("input").keyup(function () {
    var $this = $(this);
    var characters = $this.val().length;
    var maxLength = $this.attr("maxLength");

    if (characters == maxLength) {
      $this.next().focus();
    }
  });
});

Subscribe to Stephen Tvedt

Get the latest posts delivered right to your inbox