Solved

XXX.XX format

Posted on 2004-10-13
27
229 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 
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 300 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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

617 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