1

I am working on a site (that needs to work both regular browsers and on tablets and phones) that uses input fields for phone and zipcode entry.

We'd like to ensure that the data in these fields have proper formatting. The most common mechanism I've seen for that is jquery.mask - but that pre-fills the text box with fixed mask characters, and TPTB have decided that is ugly. (And I generally agree with them).

I've seen, on a few websites, phone number fields in which the formatting characters are added one-at-a-time, as the data is typed.

That is, I starting with an empty field...

  • I type "8" and I see "(8"
  • I type "0" and I see "(80"
  • I type "0" and I see "(800)"
  • I type "5" and I see "(800)5"
  • I type "5" and I see "(800)55"
  • I type "5" and I see "(800)555-"
  • I type "1" and I see "(800)555-1"
  • I type "2" and I see "(800)555-12"
  • I type "1" and I see "(800)555-121"
  • I type "2" and I see "(800)555-1212"

IOW, the formatting characters are added, one at a time, as I type characters into the field.

Does anyone know of a plugin that implements this behavior?

I'm working in ASP.NET MVC4, with Bootstrap 3, for what it is worth.

Jeff Dege
  • 11,190
  • 22
  • 96
  • 165
  • 1
    Are you sure you don't need to handle non-US phone numbers? – Gray Feb 20 '14 at 19:41
  • that would be really annoying for people using AT... – dandavis Feb 20 '14 at 19:41
  • 1
    and, after all - client side validation can be easily bypassed, so, better do that formatting on server-side, and allow user to enter only digits in form field (show 'enter only numbers') message above field)? – sinisake Feb 20 '14 at 19:46
  • When controls get fancy like this, the number of use-cases skyrockets and the end result is an annoying, difficult-to-use control that everyone avoids. For instance, what happens if I want to backspace after adding the 1? I have to backspace twice to remove your character unless you detect that in code. Highly recommend listening to nevermind and letting the server format it while performing validation on both front and back end. – jgitter Feb 20 '14 at 19:49
  • Have a look at this jsfidddle to see if it can help you out: [link](http://jsfiddle.net/dtgEw/4/), as provided on another post by @Dukhabandhu Sahoo – Stu1986C Feb 20 '14 at 19:49
  • @nevermind I'd do that if it was US-only... some international numbers can get very strange with things like the '+' sign. – Gray Feb 20 '14 at 19:52
  • 1
    This is about user experience, not validation. We'll validate and format on the server, regardless of what is entered on the client. But we want the user to see what he is submitting, as he enters it, without displaying extraneous junk, and without disrupting his workflow with "invalid format" messages. – Jeff Dege Feb 20 '14 at 19:58
  • @JeffDege, don't want to post this as answer, since i am not sure how it works on iphone, tablets (tested on android 2 and 4, in chrome for android - works partially, all chars are allowed (?!) and dekstop): http://bybyweb.com/jqnf/ Credits for number checking: http://stackoverflow.com/questions/17209180/jquery-keyup-function-check-if-number and for cursor position updating: http://stackoverflow.com/questions/19568041/set-focus-and-cursor-to-end-of-text-input-field-string-w-jquery i am curious how it will work... :) probably it will need additional optimization. – sinisake Feb 21 '14 at 01:48

1 Answers1

0

Turns out that Igor Escobar's jQuery Mask Plugin works in exactly the manner I had requested:

Jeff Dege
  • 11,190
  • 22
  • 96
  • 165