XXX.XX format

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!
sjd0103Asked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
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
 
justinbilligCommented:
is there a browser restriction? IE only? All broswers?
0
 
sjd0103Author Commented:
If IE is a quick answer for now, that's fine.  In the end, I'd like a solution that works accross browsers.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
sjd0103Author Commented:
Increased points...need an answer soon!  Thank you.
0
 
ZvonkoSystems architectCommented:
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
 
sjd0103Author Commented:
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
 
ZvonkoSystems architectCommented:
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
 
devicCommented:
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
 
devicCommented:
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
 
sjd0103Author Commented:
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
 
ZvonkoSystems architectCommented:
Are you talking now about onBlur or about onKeyDown???
0
 
ZvonkoSystems architectCommented:
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
 
devicCommented:
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
 
sjd0103Author Commented:
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
 
sjd0103Author Commented:
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
 
devicCommented:
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
 
sjd0103Author Commented:
Hello?
0
 
ZvonkoSystems architectCommented:
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
 
sjd0103Author Commented:
Thanks again, the keypad entry is the big thing.
0
 
ZvonkoSystems architectCommented:
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
 
ZvonkoSystems architectCommented:
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
 
sjd0103Author Commented:
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
 
ZvonkoSystems architectCommented:
Yes. That is the third option in my upper proposal.
Wait a second.
0
 
ZvonkoSystems architectCommented:
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
 
sjd0103Author Commented:
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
 
sjd0103Author Commented:
Thank you and have a great weekend!
0
 
ZvonkoSystems architectCommented:
Thanks.
0
All Courses

From novice to tech pro — start learning today.