7

Problem

I need to format an input field visually in order to help the user know what they should type as a phone number. For example, I want to accept a phone number as being a 3 digit area code, 3 digit prefix and 4 digit suffix: (207) 555-1212. I want to:

  1. provide the helper formatting to the input field -- those parentheses and the hyphen
  2. I don't want the 'helper' characters to be included in the actual data I store in my model.
  3. As the user types, I want the parentheses to magically appear, then have the hyphen also appear at the right point.

What's the best way to do it?

Note: This is not for displaying of a number -- I could use a filter for that. This is for formatting data within an input field.

Thanks for your help!

Improve this question
1
  • perhaps you need a custom input field (a widget)? Commented Dec 28, 2012 at 18:59

1 Answer 1

Reset to default
14

If you are looking for a simple solution, you could give AngularUI a try, http://angular-ui.github.com/

This is the example from the "Mask" section of that page:

<input ng-model="maskDemo" ui-mask="'99-99-9999'">

The "9"'s are numbers, and other stuff is just a mask / placeholders. It should only submit the actual values. You would edit the mask to include parentheses and anything else you may need.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The only downside to this is that when the phone number is viewed elsewhere, or saved in a database, it will look like "9999999999".
@MyCodeSucks that's usually what you will want, strip any non-digits, then any time you want to display your formatted number, you just apply the ui-mask to it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.