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?
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.
If you find that a plugin would be overhead, something like this would be very simple to create in jQuery.
I mocked up an implementation that checks if the value (stripping away the colons) is divisible by 2, and in case it is, it appends a colon to the value:
$(document).ready(function() {
$('#serial').keyup(function() {
var $this = $(this);
if($this.val().replace(/:/g, '').length % 2 == 0) {
if($this.val().length >= 17) return;
$this.val($this.val() + ':');
}
});
});