Thought I'd share this little snippet that helps you to break a single phone number text input into three smaller inputs. This also has a helper that will move the focus from one input to the next as the user types.

/** * Split phone number field into three smaller fields. */ $.fn.splitPhone = function() { // Generate markup for smaller fields. function phone_split(phoneId){ var arrInput = ' - '; arrInput += ' - '; arrInput += ''; return arrInput; }

   this.each(function() {
       var $this = $(this);
       if (!($this.is(':text') || $this.is(':hidden'))) { return; }
       var tabIndex = $this.attr("tabindex") ? $this.attr("tabindex") : 1;

       // Bind behaviors to new small fields.
       var $arrInput = $(phone_split($this.attr("id"))).filter("input");
       $arrInput.each(function(){ 
         $(this).attr("tabindex", tabIndex++);
         // Move focus to next field as user types.
         $(this).bind("keyup", function(e){
           if ($(this).val().length == $(this).attr('maxlength')){
             $(this).nextAll('.phone-part').first().focus();
           }
           // As user completes, concatenate values in original field.
           $this.val($arrInput[0].value+$arrInput[1].value+$arrInput[2].value)
         });
        }).end().insertBefore($this);

       // Hide original field.
       $this.attr("Type", "hidden").removeAttr("tabindex").hide();
       
       // Don't submit the values of the small fields!
       $this.parents('form').submit(function(){
         $arrInput.each(function(){
           $(this).attr('disabled', true);
         });
       });
   });

   return this;

};

Use like so: $('#edit-field-phone-number').splitPhone();