SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,001
    Mentioned
    0 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
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 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
  •