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


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


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


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


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?


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



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.

   $("#phone").mask("(999) 999-9999");

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

   $("#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.

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

and so on…

Answered By – Kees Sonnema

Answer Checked By – David Goodson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published