Solved

XXX.XX format

Posted on 2004-10-13
27
217 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
  • 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Remove 'disabled' attribute 6 27
Need to learn promise API 2 28
Autoplay video in mobile device 3 60
Problem to picture file 3 40
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'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now