javascript - Format numbers on input - Stack Overflow

admin管理员组

文章数量:1331450

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!

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!

• javascript
• html

Share Improve this question Follow edited Oct 1, 2013 at 10:34 Ruddy asked Oct 1, 2013 at 9:56 RuddyRuddy 9,92355 gold badges4848 silver badges6868 bronze badges 3

• possible duplicate of How can I format numbers as money in JavaScript? – Konsole Commented Oct 1, 2013 at 9:59
• 1 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 Commented Oct 1, 2013 at 10:16
• 1 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 Commented Oct 1, 2013 at 10:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

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/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!

本文标签： javascriptFormat numbers on inputStack Overflow