<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Fredrik Haglund's blog &#187; jQuery</title>
	<atom:link href="http://blog.fredrikhaglund.se/blog/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.fredrikhaglund.se</link>
	<description>Chatter about EPiServer, ASP.NET, CSS and Web Development.</description>
	<lastBuildDate>Tue, 28 Jun 2011 13:37:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Using jQuery to add thousands separator to textbox</title>
		<link>http://blog.fredrikhaglund.se/blog/2010/03/05/using-jquery-to-add-thousands-separator-to-textbox/</link>
		<comments>http://blog.fredrikhaglund.se/blog/2010/03/05/using-jquery-to-add-thousands-separator-to-textbox/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 06:03:00 +0000</pubDate>
		<dc:creator>Fredrik Haglund</dc:creator>
				<category><![CDATA[EPiServer]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Thousands Separator]]></category>
		<category><![CDATA[tusentalsavgränsare]]></category>
		<category><![CDATA[tusentalsseparator]]></category>

		<guid isPermaLink="false">http://blog.fredrikhaglund.se/?p=223</guid>
		<description><![CDATA[// < ![CDATA[ $(function() { var numberInputs = $("input.number"); var convertToCurrencyDisplayFormat = function(str) { var regex = /(-?[0-9]+)([0-9]{3})/; str += ''; while (regex.test(str)) { str = str.replace(regex, '$1 $2'); } str += ' kr'; return str; }; var stripNonNumeric = function(str) { str += ''; str = str.replace(/[^0-9]/g, ''); return str; }; numberInputs.each(function() { this.value [...]]]></description>
			<content:encoded><![CDATA[<p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript">
// < ![CDATA[
$(function() {
    var numberInputs = $("input.number");
    var convertToCurrencyDisplayFormat = function(str) {
        var regex = /(-?[0-9]+)([0-9]{3})/;
        str += '';
        while (regex.test(str)) {
            str = str.replace(regex, '$1 $2');
        }
        str += ' kr';
        return str;
    };
    var stripNonNumeric = function(str) {
        str += ''; 
        str = str.replace(/[^0-9]/g, '');
        return str;
    };
    numberInputs.each(function() {
        this.value = convertToCurrencyDisplayFormat( this.value );
    });
    numberInputs.blur(function() {
        this.value = convertToCurrencyDisplayFormat( this.value );
    });
    numberInputs.focus(function() {
        this.value = stripNonNumeric( this.value );
    });
    $("form").submit(function() {
        numberInputs.each(function() {
            this.value = stripNonNumeric( this.value );
        });
    });
});
// ]]&gt;</script>
<p><strong>UPDATED: Code improved after feedback from Henrik Tengelin.</strong></p>
<p>It is much easier to read large numbers with with <b>thousands separator</b> but how to get them to work with page validation in a good way?</p>
<p>The solution in this case was to sprinkle some jQuery on the page!</p>
<h3>Test how it works here</h3>
<p>
<input class="number" value="1234" />
<input class="number" value="12" />
<input class="number" value="12345678" /></p>
<h3>JavaScript code for adding thousands separator as watermark</h3>
<pre class="code">$(<span style="color: blue">function</span>() {
    <span style="color: blue">var </span>numberInputs = $(<span style="color: #a31515">&quot;input.number&quot;</span>);
    <span style="color: blue">var </span>convertToCurrencyDisplayFormat = <span style="color: blue">function</span>(str) {
        <span style="color: blue">var </span>regex = /(-?[0-9]+)([0-9]{3})/;
        str += <span style="color: #a31515">''</span>;
        <span style="color: blue">while </span>(regex.test(str)) {
            str = str.replace(regex, <span style="color: #a31515">'$1 $2'</span>);
        }
        str += <span style="color: #a31515">' kr'</span>;
        <span style="color: blue">return </span>str;
    };
    <span style="color: blue">var </span>stripNonNumeric = <span style="color: blue">function</span>(str) {
        str += <span style="color: #a31515">''</span>;
        str = str.replace(/[^0-9]/g, <span style="color: #a31515">''</span>);
        <span style="color: blue">return </span>str;
    };
    numberInputs.each(<span style="color: blue">function</span>() {
        <span style="color: blue">this</span>.value = convertToCurrencyDisplayFormat(<span style="color: blue">this</span>.value);
    });
    numberInputs.blur(<span style="color: blue">function</span>() {
        <span style="color: blue">this</span>.value = convertToCurrencyDisplayFormat(<span style="color: blue">this</span>.value);
    });
    numberInputs.focus(<span style="color: blue">function</span>() {
        <span style="color: blue">this</span>.value = stripNonNumeric(<span style="color: blue">this</span>.value);
    });
    $(<span style="color: #a31515">&quot;form&quot;</span>).submit(<span style="color: blue">function</span>() {
        numberInputs.each(<span style="color: blue">function</span>() {
            <span style="color: blue">this</span>.value = stripNonNumeric(<span style="color: blue">this</span>.value);
        });
    });
});</pre>
<p><a href="http://11011.net/software/vspaste"></a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.fredrikhaglund.se/blog/2010/03/05/using-jquery-to-add-thousands-separator-to-textbox/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

