Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

XXX.XX format

Posted on 2004-10-13
27
Medium Priority
?
230 Views
Last Modified: 2009-12-16
I have an asp.net textbox and need the input to only allow numeric values and a decimal.  I need the text to automatically format to 000.00.  For example if the user only types "3"...The text should format to 003.00.  If they type 1.5 it should show 001.50 and so on.  Also, the JS should not automatically enter a value...meaning if they enter the field (which by default will not be masked as it is not required), type something, delete it and leave, I want the textbox to still display nothing (empty string).

I'd prefer this happen onKeyUp rather than onBlur so that the users are not experiencing surprise formatting.

Thank you!
0
Comment
Question by:sjd0103
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 11
  • 4
  • +1
27 Comments
 
LVL 15

Expert Comment

by:justinbillig
ID: 12298488
is there a browser restriction? IE only? All broswers?
0
 

Author Comment

by:sjd0103
ID: 12299210
If IE is a quick answer for now, that's fine.  In the end, I'd like a solution that works accross browsers.
0
 

Author Comment

by:sjd0103
ID: 12299574
Increased points...need an answer soon!  Thank you.
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 63

Expert Comment

by:Zvonko
ID: 12300238
I am sure you do not need that what you are asking for:

<html>
<head>
<script>
function setDigits(e, theField){
  var fVal = theField.fVal;
  if(isNaN(fVal)) fVal = 0;
  var theKey = (e.keyCode)?e.keyCode:e.which;
  var theChar = String.fromCharCode(theKey);
  if(theKey==8){
    fVal = fVal.substr(0, fVal.length-1);
    theField.fVal = fVal;
    if(fVal==""){
      theField.value = "";
    } else {
      fVal = (fVal*1).toFixed(2).split(".")
      theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
    }
    return false;
  }
  if(theKey==190){
    theField.fVal = fVal+"."
  }
  if(theKey>47&&theKey<58){
    fVal += theChar;
    theField.fVal = fVal;
    fVal = (fVal*1).toFixed(2).split(".")
    theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
  }
  if(theKey<20) return true;
  return false;
}
</script>
</head>
<body>
<form>
<input type=text name="myField" onKeyDown="return setDigits(event, this)">
</form>
</body>
</html>

0
 

Author Comment

by:sjd0103
ID: 12300275
Umm...Zvonko...Before I start, I have to ask what do you mean by "I am sure you do not need that what you are asking for:"?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12300427
I my opinion is it not an advantage to have that behaviour for fields.
But give it a shot and you will see that onblur would be less confusing.
0
 
LVL 25

Expert Comment

by:devic
ID: 12300447
here is my try:
====================
<script>
function check(obj)
{
      if(!obj.value.match(/[\d\.]/)){obj.value="000.00";return;}
      var s=(obj.value.replace(/([\d]{3})([\d]{2})$/,"$1.$2")*1).toFixed(2);
      var a=s.split(".");obj.value=(a[0]*1+1000+"").substr(1,3)+"."+a[1];
}

</script>
<input onblur=check(this)>
0
 
LVL 25

Expert Comment

by:devic
ID: 12300566
onkeyup:
===========
<script>
function check(obj)
{
      obj.value=obj.value.replace(/[^\d|^\.]/g,"");
      var s=(obj.value.replace(/([\d]{3})([\d]{2})$/,"$1.$2")*1).toFixed(2);
      var a=s.split(".");obj.value=(a[0]*1+1000+"").substr(1,3)+"."+a[1];
}
</script>
<input onkeyup=check(this
0
 

Author Comment

by:sjd0103
ID: 12300571
Nifty!  My only problem at this point is that if the user wants to enter .53   ... It does not seem to let them unless they enter 0.53  ... can this be fixed?  Along that same line, they should be able to type . as the first character.  Thank you!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12300592
Are you talking now about onBlur or about onKeyDown???
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12300640
For keyDown it goes like this:

<html>
<head>
<script>
function setDigits(e, theField){
  var fVal = theField.fVal;
  if(isNaN(fVal)) fVal = 0;
  var theKey = (e.keyCode)?e.keyCode:e.which;
  var theChar = String.fromCharCode(theKey);
  if(theKey==8){
    fVal = fVal.substr(0, fVal.length-1);
    theField.fVal = fVal;
    if(fVal==""){
      theField.value = "";
    } else {
      fVal = (fVal*1).toFixed(2).split(".")
      theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
    }
    return false;
  }
  if(theKey==190){
    if(fVal==""){
      fVal = "0";
      theField.value = "000.00";
    }
    theField.fVal = fVal+"."
  }
  if(theKey>47&&theKey<58){
    fVal += theChar;
    theField.fVal = fVal;
    fVal = (fVal*1).toFixed(2).split(".")
    theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
  }
  if(theKey<20) return true;
  return false;
}
</script>
</head>
<body>
<form>
<input type=text name="myField" onKeyDown="return setDigits(event, this)">
</form>
</body>
</html>

0
 
LVL 25

Expert Comment

by:devic
ID: 12300668
for keyup so :)
==================
<script>
function check(obj)
{
      obj.value=obj.value.replace(/[^\d]/g,"");
      var s=(obj.value.replace(/([\d]{3})([\d]{2})$/,"$1.$2")*1).toFixed(2);
      var a=s.split(".");obj.value=(a[0]*1+1000+"").substr(1,3)+"."+a[1];
}
</script>
<input onkeyup=check(this)>
0
 

Author Comment

by:sjd0103
ID: 12301912
devic, I just gave your's a shot and prefer Zvonko's functionality better.  One reason is that if the user types .5 your solution is .05.  I'm not a JS guy, so I have to go with what works.  Thanks though.
0
 

Author Comment

by:sjd0103
ID: 12301934
Zvonko,

That last issue is fixed, but the max length must be 6 (hence XXX.XX) characters.  Also, numeric entry via the keypad is not happening.

Thanks again!
0
 
LVL 25

Expert Comment

by:devic
ID: 12302048
sjd0103, no problem.

just notice:
>>if the user types .5 your solution is .05
if user types "."  then I direct replace it with "000.00"


0
 

Author Comment

by:sjd0103
ID: 12307360
Hello?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12307425
Sorry, I was busy.

Here the length limitation:

<html>
<head>
<script>
function setDigits(e, theField){
  var fVal = theField.fVal;
  if(isNaN(fVal)) fVal = 0;
  var theKey = (e.keyCode)?e.keyCode:e.which;
  var theChar = String.fromCharCode(theKey);
  if(theKey==8){
    fVal = fVal.substr(0, fVal.length-1);
    theField.fVal = fVal;
    if(fVal==""){
      theField.value = "";
    } else {
      fVal = (fVal*1).toFixed(2).split(".")
      theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
    }
    return false;
  }
  if(theKey<20) return true;
  if(fVal.length>6) return false;
  if(theKey==190){
    if(fVal==""){
      fVal = "0";
      theField.value = "000.00";
    }
    theField.fVal = fVal+"."
  }
  if(theKey>47&&theKey<58){
    fVal += theChar;
    theField.fVal = fVal;
    fVal = (fVal*1).toFixed(2).split(".")
    theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
  }
  return false;
}
</script>
</head>
<body>
<form>
<input type=text name="myField" size="4" onKeyDown="return setDigits(event, this)">
</form>
</body>
</html>


0
 

Author Comment

by:sjd0103
ID: 12307718
Thanks again, the keypad entry is the big thing.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12307900
Here the keypad version:

<html>
<head>
<script>
function setDigits(e, theField){
  var fVal = ""+theField.fVal;
  if(isNaN(fVal)) fVal = 0;
  var theKey = (e.keyCode)?e.keyCode:e.which;
  var theChar = String.fromCharCode(theKey);
  if(theKey==8){
    fVal = fVal.substr(0, fVal.length-1);
    theField.fVal = fVal;
    if(fVal==""){
      theField.value = "";
    } else {
      fVal = (fVal*1).toFixed(2).split(".")
      theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
    }
    return false;
  }
  if(theKey<20) return true;
  if(fVal.length>6) return false;
  if(theKey==190 || theKey==110){
    if(fVal==""){
      fVal = "0";
      theField.value = "000.00";
    }
    theField.fVal = fVal+"."
  }
window.status = theKey+": "+theChar
  if(theKey>95&&theKey<106){
    theKey -= 48;
    theChar = String.fromCharCode(theKey);
  }
  if(theKey>47&&theKey<58){
    fVal += theChar;
    theField.fVal = fVal %= 1000;
    fVal = (fVal*1).toFixed(2).split(".")
    theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
  }
  return false;
}
</script>
</head>
<body>
<form>
<input type=text name="myField" size="4" onKeyDown="return setDigits(event, this)">
</form>
</body>
</html>


0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12307932
You did not state what you expect after three digits are entered but no dot after the three digits is entered.
Should the fourth digith push the higest hundred digit out (that's the version now doing),
or should the forth digit be rejected,
or should be dot assumed after three digits?

0
 

Author Comment

by:sjd0103
ID: 12308115
Ideally, if the 12345 is entered the JS would automatically show 123.45, then if the user continues typing 678 those digits would be ignored.  Does that make sense?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12308126
Yes. That is the third option in my upper proposal.
Wait a second.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12308192
Here it comes:

<html>
<head>
<script>
function setDigits(e, theField){
  var fVal = ""+theField.fVal;
  if(isNaN(fVal)) fVal = "";
  var theKey = (e.keyCode)?e.keyCode:e.which;
  var theChar = String.fromCharCode(theKey);
  if(theKey==8){
    fVal = fVal.substr(0, fVal.length-1);
    theField.fVal = fVal;
    if(fVal==""){
      theField.value = "";
    } else {
      fVal = (fVal*1).toFixed(2).split(".")
      theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
    }
    return false;
  }
  if(theKey<20) return true;
  if(fVal.length>5) return false;
  if(theKey==190 || theKey==110){
    if(fVal==""){
      fVal = "0";
      theField.value = "000.00";
    }
    theField.fVal = fVal+"."
  }
  if(theKey>95&&theKey<106){
    theKey -= 48;
    theChar = String.fromCharCode(theKey);
  }
  if(theKey>47&&theKey<58){
    if(fVal.length==3) fVal+="."
    fVal += theChar;
    theField.fVal = fVal;
    fVal = (fVal*1).toFixed(2).split(".")
    theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
  }
  return false;
}
</script>
</head>
<body>
<form>
<input type=text name="myField" size="4" onKeyDown="return setDigits(event, this)">
</form>
</body>
</html>

0
 

Author Comment

by:sjd0103
ID: 12308978
Something is not correct.  If I (using either the number pad or the number keys) enter .25, when I press the five the textbox value becomes "NaN.undefined". I get the same behavior on any combination of .XX once I hit the last X.  Otherwise it works well!
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 1200 total points
ID: 12309111
Here the bug correction:

<html>
<head>
<script>
function setDigits(e, theField){
  var fVal = ""+theField.fVal;
  if(isNaN(fVal)) fVal = "";
  var theKey = (e.keyCode)?e.keyCode:e.which;
  var theChar = String.fromCharCode(theKey);
  if(theKey==8){
    fVal = fVal.substr(0, fVal.length-1);
    theField.fVal = fVal;
    if(fVal==""){
      theField.value = "";
    } else {
      fVal = (fVal*1).toFixed(2).split(".")
      theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
    }
    return false;
  }
  if(theKey<20) return true;
  if(fVal.length>5) return false;
  if((dP=fVal.split(".")).length>1&&dP[1].length>1) return false;
  if(theKey==190 || theKey==110){
    if(fVal==""){
      fVal = "0";
      theField.value = "000.00";
    }
    theField.fVal = fVal+"."
  }
  if(theKey>95&&theKey<106){
    theKey -= 48;
    theChar = String.fromCharCode(theKey);
  }
  if(theKey>47&&theKey<58){
    if(fVal.length==3&&fVal.indexOf(".")<1) fVal+="."
    fVal += theChar;
    theField.fVal = fVal;
    fVal = (fVal*1).toFixed(2).split(".")
    theField.value = "000".substr(0,3-fVal[0].length)+fVal[0]+"."+fVal[1];
  }
  return false;
}
</script>
</head>
<body>
<form>
<input type=text name="myField" size="4" onKeyDown="return setDigits(event, this)">
</form>
</body>
</html>


0
 

Author Comment

by:sjd0103
ID: 12310727
Thank you and have a great weekend!
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12312026
Thanks.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

670 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question