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 mon requirement.

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 mon requirement.

• javascript
• jquery

2 Answers 2

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("(999) 999-9999");
  $("#tin").mask("99-9999999");
  $("#ssn").mask("999-99-9999");
});

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

I once used this plugin: http://digitalbush./projects/masked-input-plugin/

for your need just define

$(".yourinput").mask("9999-999999-999");