三星平板<input type="number">无法输入逗号小数分隔符问题

我开发的React应用中有一个带<input type="number">的表单，该表单在多数设备上运行正常，但在使用默认键盘的三星平板上，无法输入逗号（,）作为小数数值的分隔符。

原输入代码 #

<input
  type="number"
  min="0.01"
  className="textInputPVP"
  value={producto.PVP}
  onChange={(e) =>
    actualizarProducto(producto.uniqueId, "PVP", +e.target.value)
  }
  onFocus={handleFocus}
/>

问题现象 #

• 三星默认键盘不显示逗号（,），导致以逗号为标准小数分隔符的地区无法输入小数
• iOS及其他品牌键盘上运行正常

已尝试的方案 #

• 添加inputMode="decimal"属性强制唤起数字键盘
• 将type="number"改为type="text"并手动实现输入验证
• 修改为以下代码：

<input
    type="tel"
    inputMode="decimal"
    className="textInputPVP"
    value={producto.PVP}
    onChange={(e) => {
    let value = e.target.value.replace(".", ",");
    if (value === "" || isNaN(+value)) return;
    actualizarProducto(producto.uniqueId, "PVP", +value);
    }}
    onFocus={handleFocus}
/>

最终解决方案 #

经测试确认该问题仅存在于三星默认键盘，只需安装并使用Gboard，无需修改代码即可立即解决问题。

内容的提问来源于stack exchange，提问作者Joan Jorda Molto