I like jQuery and I was wondering if anyone have used a good plugin or (non-jQuery) JavaScript library that allows for auto-formatting of structured fields like phone numbers or dates. I know of the jquery-ui-datapicker plugin, and not what I am looking for here. You may type in a phone number as 123 which then becomes (123), additional numbers will be formatted as (123) 456 7890 Ext. 123456. If you press delete the auto-formatting stuff disappears automatically, and repositioning of the cursor, say, after (123) and pressing delete will remove the 3 and make the rest (124) 567 8901 Ext. 23456. The ones that I have played with appears unreliable.
views:
6314answers:
2
+3
Q:
Auto-format structured data (phone, date) using jQuery plugin (or failing that vanilla JavaScript)
+11
A:
Does the Masked Input plugin do what you need or that one you have already found to be unreliable?
dgvid
2008-09-21 01:12:26
Very close, thanks for the pointer. If I enter a phone number, then remove a digit and defocus the field my input is gone (argh).
Allan Wind
2008-09-21 02:19:40
This has been fixed in the latest version. You can now add '?' to the mask, which means anything after is optional. So you could add the mask "?(999) 999-9999" to allow partial phone numbers. This is particularly useful for extensions.
Adam Lassek
2009-03-09 15:34:18
+1
A:
Allan,
I do believe your best bet would be to use regular expressions inside of two separate formatting methods in order to achieve the desired results. This will be rather straight forward for phone numbers and I'll post a code example if one isn't posted by the time I sit back and have 10 minutes straight to write something up. Perhaps for the date field, you can use something like the jQuery UI Datepicker instead? http://marcgrabanski.com/pages/code/jquery-ui-datepicker
HTH,
/sf
With calendar plugin I actually meant the ui-datepicker and not suitable as far as I can tell.
Allan Wind
2008-09-21 02:17:07