Select and Replace in a Text Box

[MeNimo]

Hi,

I have a text box. Actually say I have two text boxes txt1 and txt2, both are phone number fields. The one I enter and doesn't have any auto formatting associated. The second text box txt2 has autoformatting of the dates on key press event. Now everything seems to be working okay, it formats okay, doesn't allow more than 10 digits and refomats in case the user changes couple of digits etc.. The cursor position is also fine. earlier it always went to the end of the text anytime there is a key down or up event, now all that is fixed. The only strange problem I am facing now is

Incase I try to edit say 3 continous digits in the text, using selecting the text at a time and then inserting the new three numbers, it replaces the whole text instead, but for txt1, it works fine, as there is no keyevent on the text box.

Am I clear ?

Say for eg:- I enter 1234567890 in txt1
in txt2 as I enter 1234567890 it gets formatted to (123) 456-7890.

Now I need to change 456 with 654, okay so I select 456 and I enter 654, then in txt1 it becomes 1236547890, as expected, but txt2 the whole text is replaced with 654, I donot understand why it doesn't change only the selected text portion ?

Something I noted is in case I select 456 and press delete and then enter 654, it works okay, the end result is (123) 654-7890.

Can somebody help please ?

Here is my sample code.

<input type=&quot;text&quot; maxlength=&quot;14&quot; name='FAC_FAX' onkeypress=&quot;format_myphone(this.value, this)&quot;/>

Javascript

function format_myphone(myval, myobj) {

var FmtStr=&quot;&quot;;
var val = &quot;&quot;;
var flag1 = &quot;&quot;;
var flag2 = &quot;&quot;;
var flag3 = &quot;&quot;;
var nochange = 'N' ;

e = window.event;
var keyChar = String.fromCharCode(e.keyCode);
var kCode = e.keyCode;

// alert('amicoming here');

if( ( kCode >= 48 && kCode <= 57 )
|| ( kCode >= 65 && kCode <= 90 )
|| ( kCode >= 97 && kCode <= 122 ) )
{ var i=2 ; }
else { return(true); }

val = myval.replace(/\D/g,&quot;&quot;

if(myval.charAt(0) == '(')
{ flag1= 1 ;
if ( val.length == 1 || val.length == 0 ) {
FmtStr = myval ;
nochange = 'Y' ;
// return(true);

}
} else flag1 = 0 ;

// alert(flag1) ;


if(myval.charAt(4) == ')')
{ flag2 = 1 ;
if (val.length == 3 ) {
FmtStr = myval ;
nochange = 'Y' ;
// return(true);
}
} else flag2 = 0 ;

// alert(flag2) ;

if(myval.charAt(9) == '-')
{ flag3 = 1 ;
if(val.length == 6 ) {
FmtStr = myval ;
nochange = 'Y' ;
//return(true);
}
} else flag3 = 0 ;

// alert(flag3) ;

if(nochange) {

// alert('anything to change ?') ;
if(val != '' ){
if(flag1==0 && myval.length >= 1 )
{ FmtStr = '('+ myval ;
//alert('why is it not coming here '+myval+'-'+FmtStr);
}
else if(flag2 ==0 && myval.length == 4 && val.length == 3 )
{ FmtStr = myval + ') ' ;
//alert('why is it not coming here 2'+myval+'-'+FmtStr);
}
else if(flag3 ==0 && myval.length == 9 && val.length == 6 )
{ FmtStr = myval + '-' ;
//alert('why is it not coming here 3'+myval+'-'+FmtStr);
}
else if (val.length>=10)
{ FmtStr = format_phone_number1(val) ;
//format_phone_number(FmtStr) ;
}
else { return(false) ; }
} else { FmtStr = myval ; }
} else { FmtStr = myval ; }

myobj.value = FmtStr ;

}

function format_phone_number1(myval) {
var val = &quot;&quot;;

if(myval != '' )
val = &quot;(&quot;+myval.substr(0,3)+&quot &quot;+myval.substr(3,3)+&quot;-&quot;+myval.substr(6,4);

return val ;
}

***************************

Please help !!

Thanks
Shanthi

 

[EdwardMartinIII]

Shanthi,

Is Txt2 read-only, then? I want to understand the action here: You enter a phone number in Txt1 and then when you leave the text box, your code formats the number and places it into Txt2? Or, are you wanting to also enter text into Txt2?

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[MeNimo]

Both txt1 and txt2 are enterrable.

txt1 is simple text, it doesn't do any formatting, the data remains as is.

txt2 has auto-formatting attached onkeypress event, as shown above.

on txt1 the select and replace works fine, it replaces only the selected txt, not the whole text

that is intial value is 1234567890, and i want to select 456 with 654, so i can select the three digits and then just enter 654 and it becomes 1236547890.

Incase of txt2, as I enter the digits they get formatted on the fly, and it becomes (123) 456-7890. Okay. now I want to replace this 456 with 654, so I select 456 and enter 654, the result is the whole value is replaced with 654 and not (123) 654-7890 the way I expect it.

This works if I do, select 456 and then press delete button and then press 654, then the result is (123) 654-7890.

Am I clearer now ?

Thanks

 

[EdwardMartinIII]

Yeah, I think I gotcha' covered.

How's this:

save this as &quot;Sample.js&quot;:

function ParseUSNumber(PhoneNumberInitialString)
  {
    var FmtStr="";
    var index = 0;
    var LimitCheck;

    LimitCheck = PhoneNumberInitialString.length;
    while (index != LimitCheck)
      {
        if (isNaN(parseInt(PhoneNumberInitialString.charAt(index))))
          { }
        else
          { FmtStr = FmtStr + PhoneNumberInitialString.charAt(index); }
        index = index + 1;
      }
    if (FmtStr.length == 10)
      {
        FmtStr = "(" + FmtStr.substring(0,3) + ") " + FmtStr.substring(3,6) + "-" + FmtStr.substring(6,10);
      }
    else
      {
        FmtStr=PhoneNumberInitialString;
        alert("United States phone numbers must have exactly ten digits.");
      }
    return FmtStr;
  }

and save this as &quot;ParseUSPhoneNumber.html&quot;

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
    <script src=&quot;Sample.js&quot; type=&quot;text/javascript&quot;></script>
  </head>
  <body>
    <form name=&quot;CustomerData&quot;>
      <p><input type=&quot;text&quot; id=&quot;PhoneNumber2&quot;></input> For just entering any old number</p>
      <p><input type=&quot;text&quot; id=&quot;PhoneNumber&quot; onBlur=&quot;CustomerData.PhoneNumber.value=ParseUSNumber(CustomerData.PhoneNumber.value)&quot;></input> enter a number which will then be formatted</p>
    </form>
  </body>
</html>

Does that do what you want?

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[MeNimo]

Thanks Edward,

Your code helps, but that formats only onblur or when the you leave the text box, not on fly. Do you get it ?

I did see a similar code in this forum, but I wanted something which will do it on the fly, while I still enter the information.

If you could help me with why the stuff is replacing the whole text, when I am selecting only a part of it that would be great !!

Thanks
Shanthi

 

[EdwardMartinIII]

Hm, I'm not sure how you're differentiating between using onBlur and on-the-fly. If you select three characters and want to do a typeover-edit (this is the action you're describing), the instant you type your first character, you're going to only have 8 digits and produce an &quot;on-the-fly&quot; error (say, by using keyup or keydown events, which in this case might not be appropriate). What I mean is, the only place that makes sense to check-and-format is after the three-digit correction is made. Unless your software has that elusive &quot;ReadUserMind()&quot; function , the best place to check their work is when they signal they're done, which is usually when they click over to another textbox (away from this one) which will trigger the onBlur event.

The problem you seem to be experiencing with your code is directly a result (near as I can tell) of your field's puppy-like eagerness to do its work &quot;on-the-fly&quot;, meaning upon each and every keypress (ugh!). Unless you have a really, really compelling reason to examine each and every keystroke, might I recommend having your code hold its horses until the User decides the phone number's been sufficiently changed? It still looks very professional, is a heckuva lot easier to code, and doesn't cause exactly the problem you're experiencing. And, as you can see, it's a pain to troubleshoot.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[theEclipse]

Shanthi-

I would imageine that The reason you are getting that error is because you are using the onkeypress event. try swapping out onkeypress with onblur or maybee onkeyup.

if that works, and then you can format the new number after selecting to replace 654 with 456, then you know what your problem is.


&quot;Why is it always the quiet ones?&quot;

Robert Carpenter
questions? comments? thanks? email me!
linkemapx@hotmail.com
AIM & MSN: robacarp

 

[MeNimo]

Eclipse,

you are right, onkeyup it works fine. IT doesn't overwrite the whole string in the text, but then it also brings along some other inherent defects with that.

But, yeah that helped.

Thanks
Shanthi

 

[theEclipse]

always happy to help!


&quot;Why is it always the quiet ones?&quot;

Robert Carpenter
questions? comments? thanks? email me!
linkemapx@hotmail.com
AIM & MSN: robacarp