SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,158
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post 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.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi jemz,

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

    HTML Code:
    <!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/9...x-using-jquery
    Currency conversion: http://stackoverflow.com/questions/1...-in-javascript

    Nonetheless, I hope it helps.

    P.S. Please don't hit "Reply with quote" unless it is necessary


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
  •