javascript - How can I make this number input accept commas? - Stack Overflow

I have a input in a website, the type of this input is number. Because of this I can't enter a ma which is needed.

Can some one teach me how I can make my input number and ma only?

This is the input I have ATM:

Bedrag: <input type="number" step="any" min="0" name="goed_doel_bedrag" id="goed_doel_bedrag" placeholder="Vul hier het bedrag in">

This needs to be a decimal point ma (not thousand).

I have a input in a website, the type of this input is number. Because of this I can't enter a ma which is needed.

Can some one teach me how I can make my input number and ma only?

This is the input I have ATM:

Bedrag: <input type="number" step="any" min="0" name="goed_doel_bedrag" id="goed_doel_bedrag" placeholder="Vul hier het bedrag in">

This needs to be a decimal point ma (not thousand).

• javascript
• php
• html

Share Improve this question Follow edited Mar 31, 2021 at 20:03 Heretic Monkey 12.1k77 gold badges6161 silver badges131131 bronze badges asked Jan 2, 2015 at 9:35 AnonaAnona 25311 gold badge44 silver badges1616 bronze badges 7

• 3 When you use HTML5 input types, you're asking the browser to take control over it, you don't have detailed control. – Barmar Commented Jan 2, 2015 at 9:37
• Yes... The step attribute of the input tag is not supported in Internet Explorer 9 and earlier versions. – Indra Kumar S Commented Jan 2, 2015 at 9:38
• Is there a way to convert the Input I have now to a other thing which is ableto got ma and number only – Anona Commented Jan 2, 2015 at 9:42
• Are you using ma as a decimal separator or a thousand separator? – Teemu Commented Jan 2, 2015 at 9:43
• decimal like with €5,63 – Anona Commented Jan 2, 2015 at 9:44

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

An input element with type=number accepts mas if the user interface provided by the implementation is written or configured to accept localized input that uses mas in numbers. This is determined by browser and/or system settings, and you cannot set in your code.

The conclusion is that such elements are useful only when you are willing to accept the variation in user interfaces. Each user can input numbers in a manner dictated by his browsing environment, and the browser is expected to canonicalize it to a specific internal format (e.g. converting 5,63 to 5.63 if the locale uses the ma as decimal separator).

If you don’t want that, you need to use other methods, such as type=text.

Ok, in this type of job you should use JS and/or jQuery.

First create a function:

function maOnly(input){ 

    var value = input.val();
    var values = value.split("");
    var update = "";
    var transition = "";

    var expression=/(^\d+$)|(^\d+\.\d+$)|[,\.]/;
    var finalExpression=/^([1-9][0-9]*[,\.]?\d{0,3})$/;

    for(id in values){           
        if (expression.test(values[id])==true && values[id]!=''){
            transition+=''+values[id].replace('.',',');
            if(finalExpression.test(transition) == true){
                update+=''+values[id].replace('.',',');
            }
        }
    }
    input.val(update);
}

This will turn dots into mas and accepts only one ma. This way if someone presses the dot, that's going to be changed to a ma instead of blocking his input.

Then assign that function to your input:

$('#goed_doel_bedrag').keyup(function (e) {
  maOnly($(this));
});

And change to input type text:

<input type="text" step="any" min="0" name="goed_doel_bedrag" id="goed_doel_bedrag" placeholder="Vul hier het bedrag in">

Fiddle here: jSFiddle