Re: [jQuery] Masked Phone Number Input
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jonathan Sharp Subject: [jQuery] Masked Phone Number Input I have a Proof of Concept for a masked phone number input. Tested in FF IE. It utilizes four seperate input fields but still allows for using the arrow keys, home, end and backspace across all of them. Current limitations are copy pasting. Thoughts/feedback welcome! http://jdsharp.us/code/PhoneNumber/ (It isn't linked from elsewhere on the site as I haven't released it to the world yet) Cheers, -Jonathan - If you solve that copy/paste issue this would be added to an app we use in the office here in a heartbeat... Great plugin, thanks! -ALEX ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
On 12/20/06, Alex Cook [EMAIL PROTECTED] wrote: If you solve that copy/paste issue this would be added to an app we use in the office here in a heartbeat... Great plugin, thanks! -ALEX Yeah, that's the one issue I have with it right now... I have a few ideas about how it might be solved... I'll be poking around with it some more this afternoon and see what I can come up with. Cheers, -js ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
This wouldn't work for pasting text into the inputs, but for copying it from the inputs, it just might... 1. have the four inputs initially hidden, and display a single, disabled text input. 2. on double-click, the single input is hidden, the 4 others are displayed, and focus is set to the first of the 4 inputs 3. when none of the 4 inputs has focus (or on double-clicking any of them when in edit mode), hide them and display the single, disabled input again. 4. The single input's value is just a concatenated string of the 4 inputs and the joiners (- - x). It's updated whenever any of the 4 inputs loses focus. Not the most elegant solution, but if a quick hack is needed, maybe it would do the trick? --Karl _ Karl Swedberg www.englishrules.com www.learningjquery.com On Dec 20, 2006, at 1:00 PM, Jonathan Sharp wrote: On 12/20/06, Alex Cook [EMAIL PROTECTED] wrote: If you solve that copy/paste issue this would be added to an app we use in the office here in a heartbeat... Great plugin, thanks! -ALEX Yeah, that's the one issue I have with it right now... I have a few ideas about how it might be solved... I'll be poking around with it some more this afternoon and see what I can come up with. Cheers, -js ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
On 12/20/06, Karl Swedberg [EMAIL PROTECTED] wrote: This wouldn't work for pasting text into the inputs, but for copying it from the inputs, it just might... 1. have the four inputs initially hidden, and display a single, disabled text input. 2. on double-click, the single input is hidden, the 4 others are displayed, and focus is set to the first of the 4 inputs 3. when none of the 4 inputs has focus (or on double-clicking any of them when in edit mode), hide them and display the single, disabled input again. 4. The single input's value is just a concatenated string of the 4 inputs and the joiners (- - x). It's updated whenever any of the 4 inputs loses focus. Not the most elegant solution, but if a quick hack is needed, maybe it would do the trick? --Karl Yeah, I was thinking along those lines with a few changes... The two cases (that I can think of) when a user selects input are they: mouse down highlight OR Ctrl+A. I could detect the Ctrl+A and create a new input with the joined inputs and have everything selected, focused, read-only and then remove the field onBlur. That way it would appear somewhat more natural. As for pasting, there are two options I've thought of: 1) I could detect the Ctrl+V and fire an input prompt asking them to past their value and then parse it into the fields. 2) Make sure max-length on the first field is 10-12 characters and attach an onChange event that checks the length of the field and if it's longer than 3 float the remaining values across the other fields. Thoughts? -js ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
Very nice! I could probably use this as well. Some things: - In IE I was able to put more than three characters in the first part - In IE I was able to put in letters - It would be great if you could add keyboard arrow support, i.e. to navigate between parts Blair On 12/21/06, Jonathan Sharp [EMAIL PROTECTED] wrote: I have a Proof of Concept for a masked phone number input. Tested in FF IE. It utilizes four seperate input fields but still allows for using the arrow keys, home, end and backspace across all of them. Current limitations are copy pasting. Thoughts/feedback welcome! http://jdsharp.us/code/PhoneNumber/ (It isn't linked from elsewhere on the site as I haven't released it to the world yet) Cheers, -Jonathan ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
On 12/20/06, Blair McKenzie [EMAIL PROTECTED] wrote: Very nice! I could probably use this as well. Some things: - In IE I was able to put more than three characters in the first part - In IE I was able to put in letters - It would be great if you could add keyboard arrow support, i.e. to navigate between parts Hm... what version of IE are you using? It should automatically navigate between fields and treat it as one input. I implemented navigation via arrow keys (assuming you fully filled out that field) as well as Home End key support. I've been testing with IE 6.0.29/sp2. -js ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
Wow theres alot of potential in this plugin. Any plans to go farther than just phone numbers (Custom masks, etc)? On 12/20/06, Jonathan Sharp [EMAIL PROTECTED] wrote: I have a Proof of Concept for a masked phone number input. Tested in FF IE. It utilizes four seperate input fields but still allows for using the arrow keys, home, end and backspace across all of them. Current limitations are copy pasting. Thoughts/feedback welcome! http://jdsharp.us/code/PhoneNumber/ (It isn't linked from elsewhere on the site as I haven't released it to the world yet) Cheers, -Jonathan ___ jQuery mailing list discuss@jquery.comhttps://mail.google.com/mail?view=cmtf=0[EMAIL PROTECTED] http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
Nice plugin. If you're going to release this, you might consider also allowing formatting for credit card numbers, social security numbers and all that good stuff. Then get it melded in with the official form plugin. !//-- andy matthews web developer certified advanced coldfusion programmer ICGLink, Inc. [EMAIL PROTECTED] 615.370.1530 x737 --//- -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Matt Stith Sent: Wednesday, December 20, 2006 3:43 PM To: jQuery Discussion. Subject: Re: [jQuery] Masked Phone Number Input Wow theres alot of potential in this plugin. Any plans to go farther than just phone numbers (Custom masks, etc)? On 12/20/06, Jonathan Sharp [EMAIL PROTECTED] wrote: I have a Proof of Concept for a masked phone number input. Tested in FF IE. It utilizes four seperate input fields but still allows for using the arrow keys, home, end and backspace across all of them. Current limitations are copy pasting. Thoughts/feedback welcome! http://jdsharp.us/code/PhoneNumber/ (It isn't linked from elsewhere on the site as I haven't released it to the world yet) Cheers, -Jonathan ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
Yes, very possibly. The behavior code for binding multiple text boxes
together is there and generic enough that you can have n number of boxes and
it will navigate between them with full delete, arrows, home end keys.
So for example you could do:
Social security numbers: ###-##-###.
Dates: ##/##/
Credit Card Numbers:
Decimals: ##.##
//Example
$('#creditCard').maskInput(' ');
input id=creditCard/
I think validation should be separate. The component will mask it and
filter for numeric input, etc. Also I think this component should update a
hidden formfield/textfield with it's data that will be checked before
submission.
The more I've been thinking about the copy past issue. I think Pasting is
the greater issue of the two. Is there a way to detect if a past event has
occurred? Meaning if the user selects Edit - Paste or right clicks and
selects paste?
I'd have no problem merging this into the form plugin if it's deemed a good
fit.
Cheers,
-js
On 12/20/06, Matt Stith [EMAIL PROTECTED] wrote:
Wow theres alot of potential in this plugin. Any plans to go farther than
just phone numbers (Custom masks, etc)?
On 12/20/06, Jonathan Sharp [EMAIL PROTECTED] wrote:
I have a Proof of Concept for a masked phone number input. Tested in FF
IE. It utilizes four seperate input fields but still allows for using the
arrow keys, home, end and backspace across all of them. Current limitations
are copy pasting. Thoughts/feedback welcome!
http://jdsharp.us/code/PhoneNumber/
(It isn't linked from elsewhere on the site as I haven't released it to
the world yet)
Cheers,
-Jonathan
___
jQuery mailing list
discuss@jquery.comhttps://mail.google.com/mail?view=cmtf=0[EMAIL
PROTECTED]
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
Jonathan Sharp schrieb: I'd have no problem merging this into the form plugin if it's deemed a good fit. There is quite a bunch of options that could be added to a form module as optional plugins. Starting with the already existing form plugin, adding your masked inputs and some validation stuff, all seperate to choose from whatever you need. I need to try and get my validation plugin ready. And maybe try to extract the message display stuff, so that you can use it to display messages returned by serverside-validation. -- Jörn Zaefferer http://bassistance.de ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Masked Phone Number Input
Now that's interesting. I was using the IE Tab FF extension, and that seems to make a difference. Blair On 12/21/06, Jonathan Sharp [EMAIL PROTECTED] wrote: On 12/20/06, Blair McKenzie [EMAIL PROTECTED] wrote: Very nice! I could probably use this as well. Some things: - In IE I was able to put more than three characters in the first part - In IE I was able to put in letters - It would be great if you could add keyboard arrow support, i.e. to navigate between parts Hm... what version of IE are you using? It should automatically navigate between fields and treat it as one input. I implemented navigation via arrow keys (assuming you fully filled out that field) as well as Home End key support. I've been testing with IE 6.0.29/sp2. -js ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
