iOS端number类型输入框小数输入异常及JS计算失效求助

问题根源 #

iOS设备上，input type="number" inputmode="decimal"的键盘会根据系统区域设置显示逗号作为小数点分隔符，但JavaScript的parseFloat仅识别英文小数点（.），导致输入逗号后计算逻辑失效；同时你之前的替换代码只处理了单个逗号，且未考虑光标位置问题。

方案1：实时全局替换逗号并恢复光标位置 #

修改输入事件监听，全局替换所有逗号为小数点，同时保存并恢复光标位置，避免输入时光标跳转到末尾：

const inputsDimensions = document.querySelectorAll('.form__input--dimensions');

for (const input of inputsDimensions) {
  input.addEventListener('input', (event) => {
    const target = event.target;
    const cursorPosition = target.selectionStart;
    const originalValue = target.value;
    // 全局替换所有逗号为小数点
    const updatedValue = originalValue.replace(/,/g, '.');

    if (originalValue !== updatedValue) {
      target.value = updatedValue;
      // 恢复光标位置（逗号和小数点长度一致，直接复用原位置）
      target.setSelectionRange(cursorPosition, cursorPosition);
    }
  });
}

方案2：计算层兜底处理输入值 #

在计算函数中统一预处理输入，确保不管输入的是逗号还是小数点，都能正确解析，作为方案1的兜底：

function calculateSupportArea() {
  // 封装解析函数：替换所有逗号为小数点，解析失败返回0
  const parseDimension = (value) => {
    const cleanedValue = value.replace(/,/g, '.');
    return parseFloat(cleanedValue) || 0;
  };

  const height = parseDimension(inputsDimensions[0].value);
  const width = parseDimension(inputsDimensions[1].value);

  const area = height * width;
  result.innerHTML = area.toFixed(2);
}

方案3：调整input属性强制显示小数点键盘 #

如果需要让iOS直接显示带小数点的键盘，可以将type改为text并配合pattern属性，同时保留inputmode="decimal"：

<input type="text" inputmode="decimal" pattern="[0-9]*[.,]?[0-9]+" class="form__input--dimensions">

注意：这种方式需要额外添加输入验证逻辑，限制用户只能输入数字、逗号和小数点，避免非法字符输入。

内容的提问来源于stack exchange，提问作者Raul Ramos Pinto