SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question ATM style decimal?

    Can anyone make a textbox have an ATM style decimal?
    You know as you type the decimal stays put for example it starts with 0.00 then if keypress 1 is shows 0.01 then if keypress 2 is shows 0.12 and so on. Get it?

  2. #2
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm...can't say i've ever seen that...if you can't get that to work you could just make 2 seperate text boxes...one for the dollar amounts and the other for the cents....just a suggestion...

  3. #3
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm... I'll look into it.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  4. #4
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heres something very quick-and-dirty:
    HTML Code:
    <script language="JavaScript"><!--
    
    	function make_ATM ( sID ) {
    
    		var oTextBox = document.getElementById ( sID );
    
    		if ( oTextBox ) {
    
    			oTextBox.value = Number ( oTextBox.value ).toFixed ( 2 );
    			if ( isNaN ( oTextBox.value ) ) oTextBox.value = '0.00';
    
    			oTextBox.onkeyup = function ( e ) {
    				oTextBox.value = ( Number ( oTextBox.value ) * 10 ).toFixed ( 2 );
    				if ( isNaN ( oTextBox.value ) ) oTextBox.value = '0.00';
    			}
    
    		}
    
    	}
    
    	window.onload = function ( ) {
    		make_ATM ( 'atm_input' );
    	}
    
    --></script>
    
    <body>
    
    	<form>
    
    		<input id="atm_input" type="text" name="" value="" />
    
    	</form>
    
    </body>
    The best method of doing this would involve capturing keystrokes within a text-box. Unfortunately, all browsers seem to have their own ways handling the keyboard: IE uses the global window.event object, whereas Mozilla allows you to tell which key was pressed from within an overridden onkeypress function (like the source above.)
    Of course, that's just my opinion. I could be wrong.

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's what I wrote:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[url=http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd[/url]">
    <html xml:lang="en" xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
    	<head>
    		<title>ATM Style Input</title>
    		<script type="text/javascript">
    		<!--
    			function changeValue(e, inputObject)
    			{
    				if (!e.preventDefault) e.preventDefault = function ()
    				{
    					this.returnValue = false;
    				};
    			
    				if (!e.stopPropagation) e.stopPropagation = function()
    				{
    					this.cancelBubble = true;
    				};
    				keyCode = e.keyCode ? e.keyCode : e.charCode;
    				pressedKey = String.fromCharCode(keyCode).toLowerCase();
    				if (pressedKey && (pressedKey.search(/^\\d*$/)!=-1))
    				{
    					currentValue = inputObject.value;
    					newValue  = currentValue.replace(/\\D/g, '');
    					newValue  = newValue.replace(/^0*/, '');
    					newValue += pressedKey;
    					if ((valLen = newValue.length) < 3)
    					{
    						repeatedStr = '';
    						repeatNum = 3 - valLen;
    						for (i = 0; i < repeatNum; i++)
    							repeatedStr += '0';
    						newValue = repeatedStr + newValue;
    					}
    					newValue1 = newValue.substr(0, (newValue.length - 2));
    					newValue2 = newValue.substr((newValue.length - 2), 2);
    					newValue  = '$' + newValue1 + '.' + newValue2;
    					inputObject.value = newValue;
    				}
    				e.preventDefault();
    				e.stopPropagation();
    			}
    			function resetValue(inputObject)
    			{
    				inputObject.value = '$0.00';
    			}
    		//-->
    		</script>
    	</head>
    	<body>
    		<form>
    			<input id="input" style="text-align:right" type="text" value="$0.00" onkeypress="changeValue(event, this);" />
    			<input type="button" value="Reset Input" onclick="resetValue(document.getElementById('input'));" />
    		</form>
    	</body>
    </html>
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry guys, but none of those seemed to work...the decimal point moves. It's not supposed to.
    just image that whatever is typed in the decimal stays at the 2 spot.

  7. #7
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great code, Jeff! Ive learned a lot from that.

    Golgotha > What do you mean, the decimal point moves? I tried Jeffs example and the input always has 2 decimal places. The same with my much simpler example.
    Of course, that's just my opinion. I could be wrong.

  8. #8
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm. course it also shows the script error symbol in the lower left on IE...

    I just cut and paste both of them an neither worked??

  9. #9
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which version of IE are you using? I tested my script in Opera 7.11, Mozilla 1.4, 1.5, and IE6..
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  10. #10
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ie6

  11. #11
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  12. #12
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey that works great, how come? There's no server side code involved, right?

    nevermind, I cut and paste that code and bingo it works, cheers

    thanks much

  13. #13
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Jeff, trying to grab this code again found in post 5 and now it doesn't work - can't even type in the input box on IE?

    any ideas?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •