Why Doesn't This Number Input Field Accept Comma's

I have an input field for an amount of money on my website, but this input field does not accept comma's. The problem is now that I can't type in an amount of dollars like $5,21. P

Solution 1:

You have:

input type="number"

This will restrict the control to accepting only floating point numbers. The following is from the Mozilla Developer Network

type

The type of control to display. The default type is text, if this attribute is not specified. Possible values are:

• button: A push button with no default behavior.
• checkbox: A check box. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected. You can also use the indeterminate attribute to indicate that the checkbox is in an indeterminate state (on most platforms, this draws a horizontal line across the checkbox).
• color: HTML5 A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (more info).
• date: HTML5 A control for entering a date (year, month, and day, with no time).
• datetime: HTML5 A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone.
• datetime-local: HTML5 A control for entering a date and time, with no time zone.
• email: HTML5 A field for editing an e-mail address. The input value is validated to contain either the empty string or a single valid e-mail address before submitting. The :valid and :invalid CSS pseudo-classes are applied as appropriate.
• file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
• hidden: A control that is not displayed, but whose value is submitted to the server.
• image: A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.
• month: HTML5 A control for entering a month and year, with no time zone.
• number: HTML5 A control for entering a floating point number.
• password: A single-line text field whose value is obscured. Use the maxlength attribute to specify the maximum length of the value that can be entered.
• radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group"; only one radio button in a group can be selected at one time.
• range: HTML5 A control for entering a number whose exact value is not important. This type control uses the following default values if the corresponding attributes are not specified: min: 0, max: 100, value: min + (max-min)/2, or min if max is less than min, step: 1
• reset: A button that resets the contents of the form to default values.
• search: HTML5 A single-line text field for entering search strings; line-breaks are automatically removed from the input value.
• submit: A button that submits the form.
• tel: HTML5 A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as pattern and maxlength to restrict values entered in the control. The :valid and :invalid CSS pseudo-classes are applied as appropriate.
• text: A single-line text field; line-breaks are automatically removed from the input value.
• time: HTML5 A control for entering a time value with no time zone.
• url: HTML5 A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. Line-breaks and leading or trailing whitespace are automatically removed from the input value. You can use attributes such as pattern and maxlength to restrict values entered in the control. The :valid and :invalid CSS pseudo-classes are applied as appropriate.
• week: HTML5 A control for entering a date consisting of a week-year number and a week number with no time zone.

Since it only accepts floats, it is not accepting input like $123,456 (a string). Simply changing the input type to text will solve your problem.

You can also, prepend the control with your currency symbol, like this example from bootstrap: