Force decimal point instead of comma in HTML5 number input (client-side)

Locale manipulation with lang attribute

Make quick edits to your HTML tags to enforce decimal formats:

<input type="number" lang="en-US" step="any">


The lang="en-US" specifies the American locale which uses decimal points. This might not work the same way in all browsers. Remember, browsers are sometimes as unpredictable as the weather.

Cross-browser compatibility

Inspect and understand how different browsers react:

• Firefox: On most occasions, this browser becomes your best friend and upholds the lang attribute for number inputs.
• Chrome: Plainly stubborn and might use commas even after setting the lang to a dot.
• Microsoft Edge & Safari: Have peculiar behaviors, ensure to cater to these in user accepts.
• Browser support: To track the latest trends in input[type=number] support, caniuse.com is your compass.

The step="any" will make sure any decimal value can be input if the browsers decide to plot against you and ignore the lang attribute.

Override default behaviour using JavaScript

Take control using JavaScript when the lang attribute leaves you hanging:

function forceDot(inputElement) {
  inputElement.addEventListener('input', (event) => {
    // Flickering commas fear the almighty JavaScript!
    event.target.value = event.target.value.replace(/,/g, '.');
  });
}

// Grab all number inputs and smack those commas out of 'em!
document.querySelectorAll('input[type=number]').forEach(forceDot);


The script swiftly listens to any input changes and converts commas to decimal points, delivering consistency in all locales.

Back-up plan with type="text"

If nothing else works, convert type="number" to type="text" and usher your own rules:

<input type="text" oninput="validateDecimal(this)">


function validateDecimal(inputElement) {
  if (!/^\d*\.?\d*$/.test(inputElement.value)) {
    // Only numbers and dots allowed, commas need not apply!
    inputElement.value = inputElement.value.replace(/[^0-9.]+/g, '');
  }
}


Here, you avoid all numeric-input issues and set your custom validation logic.

Challenges and considerations

The HTML puzzle

HTML versions offer varying levels of native support for inputs:

• HTML5 provides step, min, and max.
• Previous HTML versions require JS-based validation for decimals in text fields.

Deciphering localization

Different locales have different interpretations of . and ,. It's important not to get lost in translation.

Embracing localization

For a comprehensive global approach:

• Use Intl.NumberFormat for locale-friendly number displays.
• Cleave.js is a powerful library that formats inputs on-the-fly, respecting locale conventions.