Question

I have a text field where a user inputs a value in the form of 2012-112233-123. I would like the dashes to be automatically added to the field as the input is entered.

I can implement a basic check on the keyup event that checks if the cursor is in the 5th or 12th position, but this causes issues when backspacing (dashes are re-added upon removal). If possible I would also like to ignore the user input if they decide to manually add the dash.

Is there an easy way of doing this, or a simple plugin I can use? Seems like a lot of code and checking for something that I would assume is a fairly common requirement.

Answer 1

Take a look at input masks.

This jQuery plugin looks good.

It allows you to do things such this:

jQuery(function($){
  $("#date").mask("99/99/9999");
  $("#phone").mask("[phone]");
  $("#tin").mask("99-9999999");
  $("#ssn").mask("999-99-9999");
});

There’s even a callback available for when the input is filled.