jquery serial format

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() + ':');
    } 
  });

});​

Working example

You can use any mask-plugin for jQuery. Maybe this?