dynamically modify textbox AS the user types in it?

  • Thread starter Thread starter Jason Cowsill
  • Start date Start date
J

Jason Cowsill

Hi -

I am looking for a way to dynamically alter a textbox WHILE the user is
typing in it. One example would be while a user is entering their phone
number a dash would be entered automatically as soon as the user types the
third digit - the fourth digit would then follow the dash.

I've seen this done on several sites now. I know it can be done once the
user leaves the textbox with a postback, but I would like to try to
accomplish it while the user is typing.

Any help would be appreciated. I'm not sure how to go about it. I'm using C#
but VB is okay too.'

Thank you,

Jason
 
You will need to use some client side javascript.
create a 'onkeypress' event, count the characters and modify accordingly.

eg
<input type='button' onkeypress='setFormat' id='myButton' >

<script language=jscript>
function setFormat(){

var obj = document.getElementById('myButton');

var len = obj.value.length;

if(len ==3)
obj.value += '-';
else
return;

}
</script>
 
First off, I STRONGLY urge you to reconsider use of masked imput
boxes. I know there are people who like them, but - well - I guess I
think I know what they "really" want more than they do. Masked imputs
are more of a problem than they are worth most of the time. Getting
the things to work in all cases is quite difficult, and I have never
seen one that works the way I would want it to.

The problems begin when you consider the possibility of someone
editing an existing value, pasting a value into the text box,
dynamically changing the value via code, etc etc. Also, consider the
people who do not use IE, or even turn off Javascript on their PC - or
Mac? or PocketPC, or Cell phone???? Also, in your example of a phone
number, what if the person would really like to enter it with
parentheses around the area code? What if it is an international
number with a country code? Are you going to code for all these
possibilities - and make it work while editing, pasting, deleting,
etc?

Consider adding seperate text boxes for the different parts of the
input - one for the area code, and two for the different parts of the
phone number.

In the end, I call it a balance thing. You are GOING to get some
people wanting it a different way than you code it. Most people are
more comfortable with plain text. I can validate and reformat for
output. If I appease the few, I piss off the many :)

As an asside, the most common reason I have heard for input masks is
for people coming from mainframe dumb terminal days where they did not
need to enter characters during data input. The best example I know if
where I had a hospital want to have their people put a birthday in as
6 digits - format mmddyy. I tried and tried to convince them that they
"at least" needed mmddyyyy, but they pressed back. In the end, they
had to accept the fact that some insurance claims would be rejected
because they put 050103 in as the birthdate, claiming a hip
replacement procedure. The birthdate, of course was validated as
5/1/2003 instead of 5/1/1903. Ya try to convince people you know more
than they do, and - darn it - sometimes they dont believe you! :)

Dan
 
Jason,

There are two possibilities I am aware of:
(1) A product called "Perfect Format" (google will find it for you),
and,
(2) Infragistics has a suite called NetAdvantage 2004 which has
formatted input controls for the web.

Never used either one, but there ya go.


-- Godot
 
Back
Top