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 to do line animation using CSS and SVG

    How can I use JQuery to replace CSS background image and maintain gradient?

    How to add a CSS style sheet reference to all Web forms in a Visual C# .NET Web project

    how to put html inside php code [closed]

    How can I align this?

    How I can set a different font size for my text by css?

    How to make these scale right in CSS (block with horizontal and vertical attachés)

    How to remove an overhanging div

    How to force floating blocks staying in the same row in css?

    how to: dynamic navigation bar size depending on dynamic image size?

    How do I edit an external css file with PHP?

    How can i concatenate the following css string in php without creating another variable or breaking the string?

    How to move an image up and down smoothly with CSS?

    How can I style flexbox children in a multiline

    How to create a shadow in HTML, CSS & JS that doesn't accept clicks, but let it hit behind that layer?

    How to style responsive table to make table like list?

    Showing images in placeholder on focus

    How to extend background CSS styling indefinitely along the x-axis?

    How to use localhost to host my HTML and CSS website

    How to apply CSS to my JQuery Plugin

    How to use fadeTo, etc. animation tags along with a css change statement in jquery?

    How to write css for a div under a div which specific id which is itself under a div with specific class?

    How to rotate Images in HTML using CSS in FireFox..? [duplicate]

    how to setup css value for “-webkit-transform” in the “animate” method? [duplicate]

    css how to make H2 tag look same as H3 tag (turned out hard!)

    How to change image size on featured images in wordpress?

    How to build a complex table by using CSS?

    How to display first tab by default in css?

    How do I add a special CSS class to run only on IE for a div component?

    How to render a hierarchy tree in HTML5/CSS?