I’m having a problem on iOS devices when filling a <input type="number" inputmode="decimal">
. The iOS keyboard for these inputs shows numbers and a comma, only.
Both comma and period work well on Android or any desktop, but, on iOS mobile devices, the comma is getting me in troubles because it stops the JavaScript function that calculates the area:
const inputsDimensions = document.querySelectorAll('.form__input--dimensions');
function calculateSupportArea() {
const height = inputsDimensions[0].value;
const width = inputsDimensions[1].value;
if (height && width) {
const roundedArea = parseFloat(height) * parseFloat(width);
result.innerHTML = Number(roundedArea).toFixed(2);
} else {
result.innerHTML = '0.00';
}
}
However, if I type a decimal number using a dot elsewhere on the iOS mobile device and copy it to the input field, it works fine… but of course no one will do that.
copied value and succeed area calculation
I tried to replace the comma for a period in multiple ways, but nothing seems to solve the issue:
for (const input of inputsDimensions) {
input.addEventListener('input', (event) => {
event.target.value = event.target.value.replace(',', '.');
});
}