Re: [jQuery] Masked Phone Number Input

[Blair McKenzie]

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/

Re: [jQuery] Masked Phone Number Input

[Jörn Zaefferer]

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

[Jonathan Sharp]

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('   ');


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.com
> 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

[Andy Matthews]

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.



  -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

[Matt Stith]

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

[Jonathan Sharp]

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

[Blair McKenzie]

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

[Jonathan Sharp]

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

[Karl Swedberg]

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

[Jonathan Sharp]

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

[Alex Cook]

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/

[jQuery] Masked Phone Number Input

[Jonathan Sharp]

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/