How to format currency as you type using jQuery


Tags: javascript,jquery,html,css

Problem :

I want to <input type="number" /> when user type it, it automatically add <span class="t"></span> for every even-positioned thousand, for example:

1234567890

it should transforms into:

<span class="t">1</span>234<span class="t">567</span>890

I already have the code to do the formatting:

function N(n) {
  n = +n;
  if(!n) return '<i>0</i>';
  var str = '';
  var odd = false;
  while(n>0) {
    var rem = n % 1000;
    n = Math.floor(n / 1000)|0;
    rem = ((n) ? (P0(rem,3)) : rem);
    if(odd) rem = '<span class="n">' + rem + '</span>';
    str = rem + str;
    odd = !odd;
  }
  return str;
}

and the css:

span.n {
    padding-left: 3px;
    padding-right: 3px;
}

now the problem is, how to render that html into the input itself, so that every changes to that input (when user cut, paste, doing keypress, dragging certain substring using mouse) it would rendered correctly as HTML on that input.



Solution :

Nevermind, I'll just use this awesome plugin :3

jquery-number plugin could add thousand separator, and update as you type.

Example:

$('#the_input').number(true,' ');
// whenever #the_input updated/keypress, it reformat automatically

    CSS Howto..

    How can I prevent a flex container from overflowing/underflowing?

    How to make tabs on the web page?

    How to only underline text element inside an element in CSS?

    How to apply CSS to namespace prefixed elements in IE8?

    How work with degree or start and stop in linear-gradient CSS3

    How to keep a link underlined after it is clicked and then hovered over

    How to include transparency in html/css?

    How to correctly align left in CSS?

    How to make a background header image extend to full width of browser

    How to set css error-styles programatically on a TextBox

    How to create css code that works for all browser?

    How can I use a CSS transform to vertically-center two overlapping elements?

    How to Assemble HTML,CSS and JS with EachOther

    How to detect single letters and modify their look/css

    how to use css to make smartgwt look like gwtext

    How to create a darker background on a whole page with one new div

    How do you have a hidden div appear and change sizes using css or jquery?

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    how can i add extra element style for external css file?

    How to define a rectangular box for arbitrary contents in CSS/HTML?

    How to add animated gif to an image sprite?

    How to make parent div above child div without position absolute?

    Yahoo news CSS, how to achieve behavior

    How to apply custom css to android Webview when URL is from internet server?

    How to reduce amount of space between lines of text

    Why does the Jcrop-tracker not show it's correct position?

    How to change CSS when it's ng-disabled?

    How to change the slide picture when resize browser size

    How do I align tables with HTML?

    How to set margin left and right to the center div when using float:left