Question

I have a website that prompt the users to enter serial number for a product.

I have one text box and the user needs to enter the serial in this format:

xx:xx:xx:xx:xx:xx

Is there any component that will enter a : after every two characters?

Or maybe I should split the text box to 6 text boxes?

Alternatively are there any other techniques that you can suggest?

Answer 1

You could try this jquery plugin, it’s effectively a masked edit box, you should be able to set your pattern and have the input conform to it, I strongly suggest you check out the demo tab.

The code seems very simple to implement, yours will be:

jQuery(function($){
    $("#serial").mask("99:99:99:99:99:99",{placeholder:"_"});
});

Of course if your serial requires alphanumeric input, use * instead of 9.

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

Alternatively you could use 6 input boxes, I’ve seen this done before and it can look pretty good, I guess that is down to personal preference.