Format numbers on input

Question

I have been looking around and can't seem to find an way to do this. As a user inputs a number into a input field e.g:

<input type="text" class="numberOnly" id="miles" value="" />

How can I get that to update as they are typing to something like. e.g:

Input: 100000

Output: 100,000

I have some similar code that formats some other things as I calculate them, here is the function I'm using to format my other numbers.

function format_num(number) {
        number += '';
        x = number.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }

This works fine, like I said I'm not sure how to put the users input value into this and get the output back into the input field while they are typing.

Note: I need to format more then 1 input field.

Update:

I have this in my code that will trigger each time the keyboard is pressed, so that can be used. This is used for the whole form so the form updates each time a button is pressed.

 $(".numberOnly").keypress(function (e) {
            //if the letter is not digit then display error and don't type anything
            if (e.which != 8 && e.which != 46 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                //display error message
                $("#errmsg").html("Digits Only").show().fadeOut(1600);
                return false;
            } else {
                $('input').keyup(function () {



                });
            }
        });

Update 2:

Is it possible to make an kind of overlay for it, e.g: the value of the input is 1000 but the overlay shows it to the use as 1,000?

Any help would be great guys. Many thanks!

possible duplicate of [How can I format numbers as money in JavaScript?](http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript) — Konsole, Oct 01 '13 at 09:59
Why would you do that? It would be very confusing to the user. It would be more useful to accept different input formats. Make sure you are solving the right problem (and *solving* a problem rather than creating one). — Jukka K. Korpela, Oct 01 '13 at 10:16
The numbers on the form im making are very big, and the form is very simple. It would make it easier for the user in this case to see the number they have typed formatted. — Ruddy, Oct 01 '13 at 10:17

999k · Accepted Answer · 2013-10-01T10:18:19.160

2

Try with onkeypress event. Check this

<input type="text" class="numberOnly" id="miles" value="" onkeypress="format_num(id)" />
<SCRIPT LANGUAGE="JavaScript">
<!--
function format_num(id) {
var number = document.getElementById(id).value;
        number += '';
        number = number.replace(",","");
        x = number.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        document.getElementById(id).value = x1 + x2;
    }
//-->
</SCRIPT>

edited Oct 01 '13 at 10:18

answered Oct 01 '13 at 10:01

999k

6,257
2
29
32

This kinda works but, its outputting numbers like this. E.g: 100000 as 1,0,0000. Also a problem that I should have seen coming. As this makes the changes the input value my other calculations will not work due to numbers being in the new format.. – Ruddy Oct 01 '13 at 10:10
I could just remove the commas and so on, I had trouble thinking of that for some reason lol. So its just the other problem. – Ruddy Oct 01 '13 at 10:13
sorry i didnt get the other problem? Is it that you need the original function without modified? – 999k Oct 01 '13 at 10:19
The other problem was that the numbers are coming out like this. E.g: 100000 as 1,0,0000.I think this is due to each time a number is entered it trys to reformat it? Not sure but the numbers are going weird. – Ruddy Oct 01 '13 at 10:21
I have made a modification. Did you try it? – 999k Oct 01 '13 at 10:23
Yeah, this didn't work. Is there anyway for me to just show the formatted version as some kind of overlay? So they value of the input box is 1000 but it shows as 1,000? – Ruddy Oct 01 '13 at 10:29

score 0 · Answer 2 · answered Oct 01 '13 at 10:15

Good question. I had to deal with a similar problem in the past (in my case there were floating point numbers with two decimal points, so I had to keep track of the decimal point). Could not find any decent out of the box solution at the time. What I ended up doing was similar to your approach. However, instead of showing an error message you can edit the input value on the fly: detect unwanted characters and remove them from the string

$myInput.val(filterUnwantedCharacters($myInput.val()))

One problem here is that some browsers will reset the caret position to zero once you do this, so you may want to keep track of the caret position and set it after setting the input value. You may find this useful: http://www.examplet.org/jquery/caret.php

Also, you may want to format your input on keydown rather than keypress, would feel more natural for the user.

Not the easiest task, but with a bit of patience you can build a pretty decent formatter. Good luck!

Not really want I'm looking for, but thank you for your answer. — Ruddy, Oct 01 '13 at 10:48

Format numbers on input

2 Answers2