CODEWITHSUNDEEP
javascripthtml
joseagaleanoc
joseagaleanoc

Reputation: 615

How can I give an input field a format?

Everytime the user presses a button I want every 3 characters to add a dot, example:

123
123.456
12.345.678

I want this to happend everytime the key is pressed, this is what I have but no luck...

function format_num(input) {
    str = input.value;
    str.replace(/(.{3})/,'$1.')
    input.value = str;
}

<input type="text" name="num" id="num" onKeyPress="format_num(this)">

Upvotes: 0

Views: 199

Answers (4)

joseagaleanoc
joseagaleanoc

Reputation: 615

I found this script that works perfectly!! I had some issues with the answers so I looked and came up with this piece of work...Thanks anyways!!

function formatNumber( originalValue ){

    originalValue = ( originalValue != null ? originalValue.toString() : "0" );

    var nStr = originalValue.replace( /\./g, "" );
    var jj=0;
    var leftNumbers = 0;

    var x = nStr.split(',');
    var x1 = x[ 0 ];
    var x2 = x.length > 1 ? ',' + x[ 1 ] : '';
    var rgx = /(\d+)(\d{3})/;

    while( rgx.test( x1 ) ){
        x1 = x1.replace( rgx, '$1' + '.' + '$2');
    }

    nStr = x1 + x2;

    for( jj=0; leftNumbers>0; jj++ ){

        if( /[0-9]/.test( nStr.toString().substring( jj, ( jj + 1 ) ) ) )
            leftNumbers--;

    }

    if( originalValue == nStr )
        return originalValue;

    return nStr;
}

Upvotes: 0

Mitya
Mitya

Reputation: 34556

This is the most horrible, unreadable answer I've ever posted but it does work, for any number.

var num = 12345678;
var formatted = num.toString().replace(/./g, function(num) { return num+'|'; }).split('|').reverse().join('').replace(/\d{3}/g, function(nums) { return nums+'.'; }).replace(/./g, function(num) { return num+'|'; }).split('|').reverse().join('').replace(/^\./, '');

Generates 12.345.678

Upvotes: 0

Wolfgang Kuehn
Wolfgang Kuehn

Reputation: 12926

You have to scan from right to left. A more readable (compared to Utkanos) solution is

function format_num(input) {
    var inStr = input.value.replace(/\./, '');
    var outStr = '';
    for (var count=0, i=inStr.length-1; i>=0; i--, count++ ) {
        if ( count && count % 3 == 0 ) outStr = '.' + outStr;
        outStr = inStr.charAt(i) + outStr;
    }

    input.value = outStr;
}

Upvotes: 0

Sunyatasattva
Sunyatasattva

Reputation: 5840

First off, you are missing a semicolon after your regex. Second, you have to add the g modifier to find all the matches rather than stopping at the first one. Also, assign the result of the .replace() to a variable, even str itself.

str = str.replace(/(.{3})/g,"$1.");

This is because in Javascript strings are immutable: this means that all the String method do not actually change the contents string, but return a new modified string.

One last caveat: you will notice that, as you add the dots, this regex will not work anymore, as you will be adding dots in between dots.

You have to avoid counting the dots in your string. You might do so by reworking your variable before executing the Regex; something on this line:

str = str.split('.').join('');

Working example

Upvotes: 1

Related Questions