html tag input of type=”number” and culture based decimal separator
Browsers do not support HTML5 number inputs seperators very well and each users experience would differ based on their computers regional settings. It may not be wise to force the seperator to be a comma.
The only way I can think of is to use javascript. Here is one example using normal input field. Unfortunately you will lose the html5 input attributes associated with number inputs.
var Inputs = document.querySelectorAll('input');
for (var i=0; i<Inputs.length; i++) {
Inputs[i].onblur = function() {
this.value = this.value.replace('.',',');
}
}
function multiplyAndPopulate() {
var A1 = theForm.A1field.value.replace(',','.');
var A2 = theForm.A2field.value.replace(',','.');
var R1 = (A1*A2);
if (isNaN(R1) == true) {
alert('Invalid.');
return false;
}
else {
theForm.R1field.value = R1;
theForm.R1field.value = theForm.R1field.value.replace('.',',');
}
}
<input type="text" pattern="[0-9]+([\,][0-9]+)?" MaxLength="3"/>
Number input field with commas instead of points
You can use toLocaleString
var number = 123456.789;
// German uses comma as decimal separator and period for thousands
console.log(number.toLocaleString('de-DE'));
// → 123.456,789
// Arabic in most Arabic speaking countries uses Eastern Arabic digits
console.log(number.toLocaleString('ar-EG'));
// → ١٢٣٤٥٦٫٧٨٩
// India uses thousands/lakh/crore separators
console.log(number.toLocaleString('en-IN'));
// → 1,23,456.789
// the nu extension key requests a numbering system, e.g. Chinese decimal
console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
// → 一二三,四五六.七八九
// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
console.log(number.toLocaleString(['ban', 'id']));
// → 123.456,789
Allow 2 decimal places in input type= number
Instead of step="any"
, which allows for any number of decimal places, use step=".01"
, which allows up to two decimal places.
More details in the spec: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute
HTML5 input box with type= number does not accept comma in Chrome browser
As of now (30/08/2017), Antoine Thiry's answer seems to be no longer valid in Chrome (my version is 60.0.3112.113). Unfortunately I don't have any other suggestion, other than simulating type="number" with javascript.
Related Topics
Best JSON-Ld Practices: Using Multiple <Script> Elements
What's the Difference Between HTML's and CSS's Width Attribute
Are Self-Closing Input Tags Valid in HTML 4
How to Set the Thumbnail Image on HTML5 Video
How to Apply a Fade Away Effect (Not Animation) Across All the Content of a Div
Float 2 Elements Side by Side Inside a Container Div
Css: How to Get Browser Scrollbar Width? (For :Hover {Overflow: Auto} Nice Margins)
How to Draw Multiple Horizontal Lines (Notebook Paper Effect) Using CSS
3 Column Layout (Fixed, Fluid, Fixed) with Minimum Width
Aligning Elements Left and Center with Flexbox
Making a Paragraph in HTML Contain a Text from a File
Html.Dropdownlistfor() with Custom Parameter
Can Xhtml and HTML Class Attributes Value Start with a Number
Google Web Fonts and PDF Generation from HTML with Wkhtmltopdf
Unwanted Spacing Below Images in Xhtml 1.0 Strict