Force Decimal Point Instead of Comma in HTML5 Number Input (Client-Side)

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



Leave a reply



Submit