Masked input control (or simulation of)?

I'm currently working on what has turned in to something much
larger that I wanted it to be. The upside is that I'm getting $$ to do
it... but anywho.

I currently have textboxes set up to capture phone numbers,
I've also got regular expression validation in place to force the
format of the number to be (xxx) xxx-xxxx. The problem is, the people
that are paying me don't want this. What they'd like to see is a magic
textbox that fills in the ( ) and - as you type, the other alternative
is 3 separate textboxes.. a 2 that are 3 digits wide and one that is
4.

Doing it with the 3 boxes sounds like the 'easier' way to go,
I can simply concatenate the 3 values together as I see fit before
sending them on to the database... however, if I use this method, they
want the focus to automagically move from box to box as the user
enters the digits.

I'm no javascript person, but assume this is what would be
needed to accomplish the result.

So, my question to all of you is... is there a drop-in masked
control that I can use to replace the textbox, or could someone give
me a hint on how to do the hocus focus thing?Hi,

Here's some JavaScript you might use.

I put three textboxes on a form and added this in the HTML:
<script>
function Box1() {
if (Form1.TextBox1.value.length > 2)
Form1.TextBox2.focus();
}
function Box2() {
if (Form1.TextBox2.value.length > 2)
Form1.TextBox3.focus();
}
</script
You might want to use RegisterClientScriptBlock instead of typing this
directly into the HTML.

Then I added this in the Page_Load
TextBox1.Attributes.Add("onkeypress", "Box1();")
TextBox2.Attributes.Add("onkeypress", "Box2();")

I hope this helps.

Thank you, Mike
Microsoft, ASP.NET Support Professional

Microsoft highly recommends to all of our customers that they visit the
http://www.microsoft.com/protect site and perform the three straightforward
steps listed to improve your computers security.

This posting is provided "AS IS", with no warranties, and confers no rights.

-------
> From: "|{evin" <You@.dont.need>
> Newsgroups: microsoft.public.dotnet.framework.aspnet
> Subject: Masked input control (or simulation of)?
> Message-ID: <h4c0rvc3fff882urn8qe1un779mqh9vlim@.4ax.com>
> X-Newsreader: Forte Agent 1.91/32.564
> MIME-Version: 1.0
> Content-Type: text/plain; charset=us-ascii
> Content-Transfer-Encoding: 7bit
> Lines: 26
> NNTP-Posting-Host: 12.223.101.211
> X-Complaints-To: abuse@.insightbb.com
> X-Trace: attbi_s02 1068511243 12.223.101.211 (Tue, 11 Nov 2003 00:40:43
GMT)
> NNTP-Posting-Date: Tue, 11 Nov 2003 00:40:43 GMT
> Organization: Insight Broadband
> Date: Tue, 11 Nov 2003 00:40:43 GMT
> Path:
cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!news-out.cwix.com!newsfeed.cwix.co
m!news.umass.edu!arclight.uoregon.edu!wn13feed!wn1 2feed!worldnet.att.net!204
127.198.203!attbi_feed3!attbi_feed4!attbi.com!attb i_s02.POSTED!not-for-mail
> Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:189898
> X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
>
> I'm currently working on what has turned in to something much
> larger that I wanted it to be. The upside is that I'm getting $$ to do
> it... but anywho.
> I currently have textboxes set up to capture phone numbers,
> I've also got regular expression validation in place to force the
> format of the number to be (xxx) xxx-xxxx. The problem is, the people
> that are paying me don't want this. What they'd like to see is a magic
> textbox that fills in the ( ) and - as you type, the other alternative
> is 3 separate textboxes.. a 2 that are 3 digits wide and one that is
> 4.
> Doing it with the 3 boxes sounds like the 'easier' way to go,
> I can simply concatenate the 3 values together as I see fit before
> sending them on to the database... however, if I use this method, they
> want the focus to automagically move from box to box as the user
> enters the digits.
> I'm no javascript person, but assume this is what would be
> needed to accomplish the result.
> So, my question to all of you is... is there a drop-in masked
> control that I can use to replace the textbox, or could someone give
> me a hint on how to do the hocus focus thing?
On Wed, 12 Nov 2003 00:11:21 GMT, michmo@.online.microsoft.com ("Mike
Moore [MSFT]") wrote:

>Hi,
>Here's some JavaScript you might use.
>I put three textboxes on a form and added this in the HTML:
><script>
>function Box1() {
> if (Form1.TextBox1.value.length > 2)
> Form1.TextBox2.focus();
>}
>function Box2() {
> if (Form1.TextBox2.value.length > 2)
> Form1.TextBox3.focus();
>}
></script>
>You might want to use RegisterClientScriptBlock instead of typing this
>directly into the HTML.
>Then I added this in the Page_Load
> TextBox1.Attributes.Add("onkeypress", "Box1();")
> TextBox2.Attributes.Add("onkeypress", "Box2();")
>I hope this helps.
>Thank you, Mike
>Microsoft, ASP.NET Support Professional

Very similar to something someone else suggested in another group,
altthough this looks a bit cleaner, I am not, however, familiar with
RegisterClientScriptBlock.
Hi,

For more on RegisterClientScriptBlock, please see
Injecting Client-Side Script from an ASP.NET Server Control
http://msdn.microsoft.com/library/e...jectclientsides
c.asp

Thank you, Mike
Microsoft, ASP.NET Support Professional

Microsoft highly recommends to all of our customers that they visit the
http://www.microsoft.com/protect site and perform the three straightforward
steps listed to improve your computers security.

This posting is provided "AS IS", with no warranties, and confers no rights.

-------
> From: "|{evin" <You@.dont.need>
> Newsgroups: microsoft.public.dotnet.framework.aspnet
> Subject: Re: Masked input control (or simulation of)?
> Message-ID: <u433rvkos6gs388giljipe8qjshupo717t@.4ax.com>
> References: <h4c0rvc3fff882urn8qe1un779mqh9vlim@.4ax.com>
<RyTGHGLqDHA.2464@.cpmsftngxa06.phx.gbl>
> X-Newsreader: Forte Agent 1.91/32.564
> MIME-Version: 1.0
> Content-Type: text/plain; charset=us-ascii
> Content-Transfer-Encoding: 7bit
> Lines: 35
> NNTP-Posting-Host: 12.223.101.211
> X-Complaints-To: abuse@.insightbb.com
> X-Trace: attbi_s02 1068600056 12.223.101.211 (Wed, 12 Nov 2003 01:20:56
GMT)
> NNTP-Posting-Date: Wed, 12 Nov 2003 01:20:56 GMT
> Organization: Insight Broadband
> Date: Wed, 12 Nov 2003 01:20:56 GMT
> Path:
cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed 00.sul.t-online.de!t-onlin
e.de!newsfeed.icl.net!newsfeed.fjserv.net!logbridg e.uoregon.edu!arclight.uor
egon.edu!wn13feed!wn12feed!worldnet.att.net!204.12 7.198.203!attbi_feed3!attb
i_feed4!attbi.com!attbi_s02.POSTED!not-for-mail
> Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:190236
> X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
> On Wed, 12 Nov 2003 00:11:21 GMT, michmo@.online.microsoft.com ("Mike
> Moore [MSFT]") wrote:
> >Hi,
> >Here's some JavaScript you might use.
> >I put three textboxes on a form and added this in the HTML:
> ><script>
> >function Box1() {
> > if (Form1.TextBox1.value.length > 2)
> > Form1.TextBox2.focus();
> >}
> >function Box2() {
> > if (Form1.TextBox2.value.length > 2)
> > Form1.TextBox3.focus();
> >}
> ></script>
> >You might want to use RegisterClientScriptBlock instead of typing this
> >directly into the HTML.
> >Then I added this in the Page_Load
> > TextBox1.Attributes.Add("onkeypress", "Box1();")
> > TextBox2.Attributes.Add("onkeypress", "Box2();")
> >I hope this helps.
> >Thank you, Mike
> >Microsoft, ASP.NET Support Professional
> Very similar to something someone else suggested in another group,
> altthough this looks a bit cleaner, I am not, however, familiar with
> RegisterClientScriptBlock.
On Wed, 12 Nov 2003 18:42:27 GMT, michmo@.online.microsoft.com ("Mike
Moore [MSFT]") wrote:

>Hi,
>For more on RegisterClientScriptBlock, please see
>Injecting Client-Side Script from an ASP.NET Server Control
>http://msdn.microsoft.com/library/e...jectclientsides
>c.asp
>Thank you, Mike
>Microsoft, ASP.NET Support Professional

I actually found this sometime after midnight last night. I went on to
develop a custom web control that encapsulated the 3 text boxes, the
movement from field to field, a routine that only allows numbers to be
entered into the textboxes, and a custom validator that forces all 10
digits to be entered.

Best of all, the textbox ID's and all of the javascript are generated
on the fly using RegisterClientScriptBlock.. I can place multiple
instances of the control on a web page and everything still gets
hooked up correctly! (although the page source gets a bit large...
there are 6 javascript functions generated for each control).

Thanks a TON!
On Wed, 12 Nov 2003 00:11:21 GMT, michmo@.online.microsoft.com ("Mike
Moore [MSFT]") wrote:

>Hi,
>Here's some JavaScript you might use.
>I put three textboxes on a form and added this in the HTML:
><script>
>function Box1() {
> if (Form1.TextBox1.value.length > 2)
> Form1.TextBox2.focus();
>}
>function Box2() {
> if (Form1.TextBox2.value.length > 2)
> Form1.TextBox3.focus();
>}
></script>
>You might want to use RegisterClientScriptBlock instead of typing this
>directly into the HTML.
>Then I added this in the Page_Load
> TextBox1.Attributes.Add("onkeypress", "Box1();")
> TextBox2.Attributes.Add("onkeypress", "Box2();")
>I hope this helps.
>Thank you, Mike
>Microsoft, ASP.NET Support Professional

Well, I thought I had it knocked out. :(

The code that automagically moves the cursor doesn't work with
NetScape 7.

if ( document.all("pcfax_TextBox1").value.length > 2 )
{
document.all("pcfax_TextBox2").focus();
}

I've tried replacing with something like

if ( document.getElementById("pcfax_TextBox1").value.length > 2 )
{
document.getElementByIdl("pcfax_TextBox2").focus();
}

But the browser complains that pcfax_TextBox2 has no properties. :(

Is there a cross-browser way to access elements by ID? I've noticed
that a lot of my custom validators do not fire correctly either
because of this same issue.
Hi,

I'm sorry, I don't know the way to do this in Netscape. I recommend that
you try a Netscape oriented newsgroup or chat room. Some can be found at
http://channels.netscape.com/ns/jum...ity/default.jsp

Thank you, Mike
Microsoft, ASP.NET Support Professional

Microsoft highly recommends to all of our customers that they visit the
http://www.microsoft.com/protect site and perform the three straightforward
steps listed to improve your computers security.

This posting is provided "AS IS", with no warranties, and confers no rights.

-------
> From: "|{evin" <You@.dont.need>
> Newsgroups: microsoft.public.dotnet.framework.aspnet
> Subject: Re: Masked input control (or simulation of) - Cross Browser??
> Message-ID: <ttpfrvok6fcpc3vatiisvit49l660auor7@.4ax.com>
> References: <h4c0rvc3fff882urn8qe1un779mqh9vlim@.4ax.com>
<RyTGHGLqDHA.2464@.cpmsftngxa06.phx.gbl>
> X-Newsreader: Forte Agent 1.91/32.564
> MIME-Version: 1.0
> Content-Type: text/plain; charset=us-ascii
> Content-Transfer-Encoding: 7bit
> Lines: 54
> NNTP-Posting-Host: 12.223.101.211
> X-Complaints-To: abuse@.insightbb.com
> X-Trace: attbi_s53 1069016964 12.223.101.211 (Sun, 16 Nov 2003 21:09:24
GMT)
> NNTP-Posting-Date: Sun, 16 Nov 2003 21:09:24 GMT
> Organization: Insight Broadband
> Date: Sun, 16 Nov 2003 21:09:24 GMT
> Path:
cpmsftngxa06.phx.gbl!TK2MSFTNGP08.phx.gbl!news-out.cwix.com!newsfeed.cwix.co
m!news.umass.edu!arclight.uoregon.edu!wn13feed!wor ldnet.att.net!204.127.198.
203!attbi_feed3!attbi_feed4!attbi.com!attbi_s53.PO STED!not-for-mail
> Xref: cpmsftngxa06.phx.gbl microsoft.public.dotnet.framework.aspnet:191228
> X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet
> On Wed, 12 Nov 2003 00:11:21 GMT, michmo@.online.microsoft.com ("Mike
> Moore [MSFT]") wrote:
> >Hi,
> >Here's some JavaScript you might use.
> >I put three textboxes on a form and added this in the HTML:
> ><script>
> >function Box1() {
> > if (Form1.TextBox1.value.length > 2)
> > Form1.TextBox2.focus();
> >}
> >function Box2() {
> > if (Form1.TextBox2.value.length > 2)
> > Form1.TextBox3.focus();
> >}
> ></script>
> >You might want to use RegisterClientScriptBlock instead of typing this
> >directly into the HTML.
> >Then I added this in the Page_Load
> > TextBox1.Attributes.Add("onkeypress", "Box1();")
> > TextBox2.Attributes.Add("onkeypress", "Box2();")
> >I hope this helps.
> >Thank you, Mike
> >Microsoft, ASP.NET Support Professional
> Well, I thought I had it knocked out. :(
> The code that automagically moves the cursor doesn't work with
> NetScape 7.
> if ( document.all("pcfax_TextBox1").value.length > 2 )
> {
> document.all("pcfax_TextBox2").focus();
> }
> I've tried replacing with something like
> if ( document.getElementById("pcfax_TextBox1").value.length > 2 )
> {
> document.getElementByIdl("pcfax_TextBox2").focus();
> }
> But the browser complains that pcfax_TextBox2 has no properties. :(
> Is there a cross-browser way to access elements by ID? I've noticed
> that a lot of my custom validators do not fire correctly either
> because of this same issue.
On Mon, 17 Nov 2003 19:18:26 GMT, michmo@.online.microsoft.com ("Mike
Moore [MSFT]") wrote:

>Hi,
>I'm sorry, I don't know the way to do this in Netscape. I recommend that
>you try a Netscape oriented newsgroup or chat room. Some can be found at
>http://channels.netscape.com/ns/jum...ity/default.jsp
>Thank you, Mike
>Microsoft, ASP.NET Support Professional
>Microsoft highly recommends to all of our customers that they visit the
>http://www.microsoft.com/protect site and perform the three straightforward
>steps listed to improve your computers security.
>This posting is provided "AS IS", with no warranties, and confers no rights.

Nuts. 95% of this application is used by back-end people. 100% IE. The
other 5% is publicly accessable so I need to get it working at least
there... or redirect them to comebackwitharealbrowser.htm.

:)