[FIXED] How to make a serial number form? with "-" split in the middle

Issue

I want to make a form on HTML for users to submit a serial code. It looks like this:

XX-XX-XX-XX-XX-XX

But I don't want the users to manually type in the "-"s.

I have two possible solutions in mind.

1. My first plan is I make multiple < input > for each section, And add a tab index, but that is still too hard for phone users, because Android doesn't have TAB like feature to scroll through the 6 < input >s. Which means they'll have to deal with tapping the super small input boxes and experience the glitchy keyboard popping up and down.

2. I could make it so that the textbox is controlled with Javascript and make it check the box and split the code with "-" automatically. But imagine if you have

01-02-03-09-05-06

and you want to change the "09", if the user deletes the "9" it will glitch and look like this:

01-02-03-00-50-6

which in my opinion is not good enough. I want to make it perfect for the user.

So how do the professionals do it? Is it possible that the cursor in plan 1 can automatically jump from one < input > to the next?

Solution

There's an awesome jquery plugin for this kind of inputs:

https://github.com/digitalBush/jquery.maskedinput

code:

First, include the jQuery and masked input javascript files.

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Next, call the mask function for those items you wish to have masked.

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});

Optionally, if you are not satisfied with the underscore ('_') character as a placeholder, you may pass an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method.

jQuery(function($){
   $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}});
});

and so on...

Answered By - Kees Sonnema
Answer Checked By - Candace Johnson (JavaFixing Volunteer)