java - How to make a serial number form? with "-" split in the middle -

i want make form on html users submit serial code. looks this:

xx-xx-xx-xx-xx-xx

but don't want users manually type in "-"s.

i have 2 possible solutions in mind.

1. my first plan make multiple < input > each section, , add tab index, still hard phone users, because android doesn't have tab feature scroll through 6 < input >s. means they'll have deal tapping super small input boxes , experience glitchy keyboard popping , down.

2. i make textbox controlled javascript , make check box , split code "-" automatically. imagine if have

01-02-03-09-05-06

and want change "09", if user deletes "9" glitch , this:

01-02-03-00-50-6

which in opinion not enough. want make perfect user.

so how professionals it? possible cursor in plan 1 can automatically jump 1 < input > next?

there's awesome jquery plugin kind of inputs:

http://digitalbush.com/projects/masked-input-plugin/

code:

first, include jquery , masked input javascript files.

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

next, call mask function items wish 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 not satisfied underscore ('_') character placeholder, may pass optional argument maskedinput method.

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

optionally, if execute function once mask has been completed, can specify function optional argument maskedinput method.

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

and on...