I'm implementing the forgiving format pattern for phone numbers and social security numbers on a web site.

Basically, the idea is the user types their (US) phone number:


The system provides feedback that it understands the input by reformatting:


When should the "echo back" happen?

  1. As soon as 10th digit is entered?
  2. When the field is blurred?

2 Answers 2


Do not rewrite until blur. Someone might type 7 digits, then go to the beginning and add '180'... all of a sudden before they get the second 0 on the area code, it gets re-written and their cursor position is lost.

Always format the input when they are leaving the control, never when their cursor is still there and they may still be editing or adding information. This is true of nearly any control (not just phone numbers).

You can do live validation (like password controls that give a in-progress idea of the password quality); but never do live re-writing.


Strictly as a user, I would want the inputs to behave consistently. If you do any other transformations or validations on blur, then I'd probably want this field to do its thing on blur also. But if any/all other fields typically validate or give feedback immediately (e.g., when you clear all text from a required field, it "turns red" immediately), then I'd probably want the transformation to happen immediately.

UPDATE: I agree with Myrddin Emrys's answer as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.