Formattting textbox problem

Hi, Can i ask some help please…I have textbox that the user will input amount,but the problem is my textbox will not format after the user input the desired amount

example:

the user will input this: 1250

I want that after the user press enter key it will format like this

1,250.00

is this possible ?

Thank you in advance.

Hi jemz,

Yeah, sure it’s possible.
Check this script out:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Format currency example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <form id="myForm">
      <label for="myTextField">Enter Amount (only digits 0-9):</label>
      <input id="myTextField" />
    </form>
    
    <script>
      $(document).ready(function() {
        $('#myTextField').keydown(function(event) {
          // Allow: backspace, delete, tab, escape, and enter
          if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
          // Allow: Ctrl+A
          (event.keyCode == 65 && event.ctrlKey === true) || 
          // Allow: home, end, left, right
          (event.keyCode >= 35 && event.keyCode <= 39)) {
          // let it happen, don't do anything
            return;
          }
          else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
              event.preventDefault(); 
            }  
          }
        });
      
        function formatMoney(num) {
            var p = num.toFixed(2).split(".");
            return p[0].split("").reverse().reduce(function(acc, num, i, orig) {
                return  num + (i && !(i % 3) ? "," : "") + acc;
            }, "") + "." + p[1];
        }  
        
        $("#myTextField").on("blur", function() {
          if (!$(this).val() ==''){
            v = formatMoney(Number($(this).val()));
            $(this).val(v);
          }
        });
        
        $("#myTextField").on("focus", function() {
          if (!$(this).val() ==''){
            $(this).val('');
          }
        });
        
        $("#myForm").on("submit", function(){
          $("#myTextField").blur();
          return false;
        })
      });
    </script>
  </body>
</html>

I’ve included a function to ensure that the users can only enter digits into the text box, as well as a function to convert what was entered into the desired format as soon as focus leaves the text box.

I’m afraid I can’t take credit for a lot of this code:
Only numbers method: http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery
Currency conversion: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript

Nonetheless, I hope it helps.

P.S. Please don’t hit “Reply with quote” unless it is necessary :slight_smile: