Limiting characters in a text box

**Martin Honnen** · Jul 23 '05, 03:23 PM

Re: Limiting characters in a text box

Rogue Chameleon wrote:

[color=blue]
> I have a input filed of type "textbox" into which I am expecting to get
> currency values (ie. 199.99). Is there a way that I can restrict the
> user to only entering 2 values after the decimal point?
>
> I can restrict the maxlength to 5, but that wouldn't stop the user from
> type in 1.987.[/color]

Your best bet is to use the onchange handler e.g.
<input type="text"
onchange="valid ateCurrency(thi s);"
to validate the value entered in the text control, that works reliably
in current browsers. It might even be better to validate all controls in
the onsubmit handler of the form. You have to write the function
validateCurrenc y of course.
Restricting the user while he types is more difficult, there are key
events fired and you can even cancel them but in many browsers there is
no API to keep track of the caret in the text control while the key
events fire. And pasting into the text control is also not covered by
key events.

--

Martin Honnen

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

**McKirahan** · Jul 23 '05, 03:23 PM

Re: Limiting characters in a text box

"Rogue Chameleon" <rogue.chameleo n@gmail.com> wrote in message
news:1100791269 .532829.269890@ c13g2000cwb.goo glegroups.com.. .[color=blue]
> Hi all
>
> I have a input filed of type "textbox" into which I am expecting to get
> currency values (ie. 199.99). Is there a way that I can restrict the
> user to only entering 2 values after the decimal point?
>
> I can restrict the maxlength to 5, but that wouldn't stop the user from
> type in 1.987.
>
> tia
> rogue chameleon[/color]

JavaScript can be used though some visitor's browsers may have it disabled.

Try this though there may be a better solution that uses a regular
expression.

<html>
<head>
<title>decimals .htm</title>
<script type="text/javascript">
function decimals(that) {
var s = that.value;
var i = s.indexOf(".");
if (i >= 0 && s.substr(i+1).l ength > 2) {
alert("Only 2 digits to the right of the decimal are allowed!");
that.value = s.substring(0,s .length-1);
}
}
</script>
</head>
<body>
<form>
<input type="text" size="5" maxlength="5" onkeyup="decima ls(this)">
</form>
</body>
</html>

**McKirahan** · Jul 23 '05, 03:23 PM

Re: Limiting characters in a text box

"McKirahan" <News@McKirahan .com> wrote in message
news:7W3nd.1138 48$R05.15686@at tbi_s53...[color=blue]
> "Rogue Chameleon" <rogue.chameleo n@gmail.com> wrote in message
> news:1100791269 .532829.269890@ c13g2000cwb.goo glegroups.com.. .[color=green]
> > Hi all
> >
> > I have a input filed of type "textbox" into which I am expecting to get
> > currency values (ie. 199.99). Is there a way that I can restrict the
> > user to only entering 2 values after the decimal point?
> >
> > I can restrict the maxlength to 5, but that wouldn't stop the user from
> > type in 1.987.
> >
> > tia
> > rogue chameleon[/color][/color]

[snip]

This version is better as it handles the issue of cut-and-pasting a value
"1.234".

<html>
<head>
<title>decimals .htm</title>
<script type="text/javascript">
function decimals(that) {
var s = that.value;
var i = s.indexOf(".");
if (i < 0 || s.substr(i+1).l ength < 3) return;
alert("Only 2 digits to the right of the decimal are allowed!");
that.value = s.substring(0,i +3);
}
</script>
</head>
<body>
<form>
<input type="text" size="5" maxlength="5" onkeyup="decima ls(this)">
</form>
</body>
</html>

**Rogue Chameleon** · Jul 23 '05, 03:25 PM

Re: Limiting characters in a text box

Thanks everyone.... I'll try all posted solutions, and see which one
reacts the way I need.

rc

**RobB** · Jul 23 '05, 03:26 PM

Re: Limiting characters in a text box

"Rogue Chameleon" <rogue.chameleo n@gmail.com> wrote in message news:<110079126 9.532829.269890 @c13g2000cwb.go oglegroups.com> ...[color=blue]
> Hi all
>
> I have a input filed of type "textbox" into which I am expecting to get
> currency values (ie. 199.99). Is there a way that I can restrict the
> user to only entering 2 values after the decimal point?
>
> I can restrict the maxlength to 5, but that wouldn't stop the user from
> type in 1.987.
>
> tia
> rogue chameleon[/color]

I concur with M. Honnen's caveats in re key handlers - although
onchange can be circumvented by pasting in a copy of the same string.
Similarly, onkeyup alone will fire for mouse/keystroke pasting, but
not for menu pastes. Just for the heck of it...

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled </title>
<script type="text/javascript">
//<![CDATA[

chkfld.running = false; //keep handlers separate
function chkfld(oText)
{
if (chkfld.running ) //one at a time
return;
chkfld.running = true;
var msg = '', v = oText.value;
if (!/^\d*\.?\d*$/.test(v))
msg += 'Only numbers, please !';
else if (/\.\d{3,}$/.test(v))
msg += 'Only two decimal places, please !';
if (msg != '')
{
alert(msg);
oText.value = v.replace(/[^\d.]/g,
'').replace(/(\d*)(\.)(\d*)\ .(\d*)/g,
'$1$2$3$4').rep lace(/^(\d*\.\d{2}).+ $/,'$1');
return (chkfld.running = false);
}
chkfld.running = false;
}

//]]>
</script>
</head>
<body>
<form>
<input type="text" size="5" maxlength="5" onkeyup="return
chkfld(this)" onblur="return chkfld(this)" />
</form>
</body>
</html>

Tested iewin, NS7.2, Op7 - no mac handy at the moment. I'd shop this
around before using, if at all. Price is right, tho....

**J. J. Cale** · Jul 23 '05, 03:26 PM

Re: Limiting characters in a text box

You can use a regex to check the format.
The following should allow any number of digits before and including the
decimal point, and only two after it.
/^\d+.\d{2}$/ Checked briefly in IE6.
You can limit the user input to only digits and/or periods but that is
tantamount to terrorizing the user. Unless you have a serious reason, it is
totally unnecessary and should be avoided.

Take Martin Honnens advice and do the validation on form submission.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>va lidate currency</TITLE>
<script type=text/javascript>
function validateCurrenc y(sText) {
if(!/^\d+.\d{2}$/.test(sText)) {
alert('not formatted correctly');
document.forms[0].elements[0].focus();
return false;
}
return true;
}
</script>
</HEAD>
<BODY>
<form onsubmit="retur n validateCurrenc y(this.elements[0].value)">
<input type=text)></form>
</BODY></HTML>
Finally read Martins post 2 or 3 more times. Though he tends to be brief ALL
of his points are significant.
HTH
Jimbo
"Rogue Chameleon" <rogue.chameleo n@gmail.com> wrote in message
news:1100791269 .532829.269890@ c13g2000cwb.goo glegroups.com.. .[color=blue]
> Hi all
>
> I have a input filed of type "textbox" into which I am expecting to get
> currency values (ie. 199.99). Is there a way that I can restrict the
> user to only entering 2 values after the decimal point?
>
> I can restrict the maxlength to 5, but that wouldn't stop the user from
> type in 1.987.
>
> tia
> rogue chameleon
>[/color]

**RobB** · Jul 23 '05, 03:27 PM

Re: Limiting characters in a text box

"Rogue Chameleon" <rogue.chameleo n@gmail.com> wrote in message news:<110080686 9.905168.192460 @f14g2000cwb.go oglegroups.com> ...[color=blue]
> Thanks everyone.... I'll try all posted solutions, and see which one
> reacts the way I need.
>
> rc[/color]

OK, somewhat better imo. Also minus a linefeed error inflicted by this board. :(

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled </title>
<script type="text/javascript">
//<![CDATA[

$format.running = false; //keep handlers separate
function $format(fld, leaving)
{
if ($format.runnin g) //one at a time
return;
$format.running = true;
var v = fld.value;
if (!/^\d*\.?\d*$/.test(v) || /\.\d{3,}$/.test(v))
{
fld.value = v.replace(/[^\d.]/g,'').
replace(/\.(.*)\./g,'$1.').
replace(/^(\d*\.\d{2}).+ $/,'$1');
return ($format.runnin g = false);
}
if (leaving && /\.\d$/.test(fld.value ))
fld.value += '0';
$format.running = false;
}

//]]>
</script>
</head>
<body style="font-family:arial;ma rgin:100px;"
onload="documen t.forms[0].foo.focus()">
<form style="font-size:100%;" onreset="foo.fo cus()">
$ <input type="text" name="foo" value="" size="8" maxlength="8"
onkeyup="return $format(this,fa lse)"
onblur="return $format(this,tr ue)" />
<input type="reset" value="clear" />
</form>
</body>
</html>

**Rob B** · Jul 23 '05, 03:29 PM

Re: Limiting characters in a text box

OK...final answer.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled </title>
<script type="text/javascript">
//<![CDATA[

$format.RE1 = /^\d*\.?\d*$/;
$format.RE2 = /\.\d{3,}$/;
$format.RE3 = /\.(?=[^.]*\.)/g;
$format.RE4 = /[^\d.]/g;
$format.RE5 = /\.(?=[^.]*\.)/g;
$format.RE6 = /^(\d*\.\d{2}).+ $/;
$format.RE7 = /(\.\d{0,1})$/;

function $format(fld, leaving)
{
function sReverse(str)
{
for (var s = '', i = str.length - 1; i != -1; --i)
s += str.charAt(i);
return s;
}

var v = fld.value;
if (!$format.RE1.t est(v) || $format.RE2.tes t(v))
{
var ltdot = (fld.dotpos == v.indexOf('.') ?
v.lastIndexOf(' .') < fld.dotpos :
v.indexOf('.') < fld.dotpos);
if (ltdot)
v = sReverse(v);
v = v.replace($form at.RE3,'');
if (ltdot)
v = sReverse(v);
v =
v.replace($form at.RE4,'').repl ace($format.RE5 ,'').replace($f ormat.RE6,'$
1');
fld.value = v;
}
fld.dotpos = v.indexOf('.');
if (leaving)
fld.value = v.replace($form at.RE7, '$10').replace( $format.RE7, '$10');
}

//]]>
</script>
</head>
<body style="font:110 % arial;margin:10 0px;"
onload="f=docum ent.forms[0];f.reset();f.fo o.focus()">
<form onreset="foo.fo cus()">
$ <input type="text" name="foo" value="" size="10" maxlength="8"
style="text-align:center;bo rder:1px black solid;"
onkeyup="return $format(this,fa lse)"
onblur="return $format(this,tr ue)" />
<input type="reset" value="clear" />
</form>
</body>
</html>

The O.P. seems to be long gone, so, maybe someone else can use
this...good exercise, in any event.

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

**Rogue Chameleon** · Jul 23 '05, 03:30 PM

Re: Limiting characters in a text box

LOL, RobB!
Thanks for looking into this so much... your dedication is admirable :)

**Rob B** · Jul 23 '05, 03:31 PM

Re: Limiting characters in a text box

The Chameleon Lives! :-)
Your welcome, Rogue.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled </title>
<script type="text/javascript">
//<![CDATA[

cF.RE1 = /^\d*\.?\d*$/;
cF.RE2 = /\.\d{3,}$/;
cF.RE3 = /\.(?=[^.]*\.)/g;
cF.RE4 = /[^\d.]/g;
cF.RE5 = /\.(?=[^.]*\.)/g;
cF.RE6 = /^(\d*\.\d{2}).+ $/;
cF.RE7 = /(\.\d{0,1})$/;
cF.RE8 = /^([^.]+)$/;

String.prototyp e.reverse = function()
{
return this.split(''). reverse().join( '');
}

function cF(fld, onblur)
{
var v = fld.value;
if (!cF.RE1.test(v ) || cF.RE2.test(v))
{
var ltdot = (fld.dotpos == v.indexOf('.') ?
v.lastIndexOf(' .') < fld.dotpos :
v.indexOf('.') < fld.dotpos);
if (ltdot)
v = v.reverse();
v = v.replace(cF.RE 3,'');
if (ltdot)
v = v.reverse();
v = v.replace(cF.RE 4,'').
replace(cF.RE5, '').
replace(cF.RE6, '$1');
fld.value = v;
}
fld.dotpos = v.indexOf('.');
if (onblur)
fld.value = v.replace(cF.RE 7, '$10').
replace(cF.RE7, '$10').
replace(cF.RE8, '$1.00');
}

//]]>
</script>
</head>
<body style="font:100 % arial;margin:30 0px;"
onload="f=docum ent.forms[0];f.reset();f.fo o.focus()">
<form onreset="foo.fo cus()">
$ <input type="text" name="foo" value="" size="10" maxlength="8"
style="font:75% arial;text-align:center;bo rder:1px black solid;"
onkeyup="return cF(this,false)"
onblur="return cF(this,true)" />
<input type="reset" value="clear" style="font:75% arial;border:1p x black
solid;" />
</form>
</body>
</html>

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

Limiting characters in a text box

Limiting characters in a text box

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment