我之前也踩过这个坑——既要让移动端唤起支持小数点/逗号的数字键盘，又不能牺牲输入值的获取和自定义验证的灵活性。结合你的尝试，给你几个实测有效的方案：

首选方案：type="text" + inputmode="decimal" + 自定义Pattern #

这是目前兼容性最均衡的方案，既符合浏览器规范，又能满足你的核心需求：

<input type="text" inputmode="decimal" pattern="[0-9.,]*" placeholder="请输入数字（支持小数点/逗号）">

为什么好用： #

• inputmode="decimal"：明确告诉移动端浏览器唤起带小数输入功能的数字键盘，不同系统会根据语言设置显示小数点或逗号，但都支持小数输入，不会像type="tel"那样限制死输入内容；
• type="text"：保留了文本输入框的所有灵活性，输入的任何内容（包括1.2或1,3）都能通过value正常获取，完全避免type="number"的取值bug；
• pattern="[0-9.,]*"：既可以配合HTML5原生表单验证做基础限制，也能结合JS写自定义的验证逻辑（比如限制小数点/逗号的个数、数字范围等）。

iOS 专属优化方案 #

iOS Safari 对inputmode的支持偶尔会有小问题，加上这两个属性可以进一步优化体验，再配合JS统一处理小数点/逗号的格式：

<input type="text" inputmode="decimal" pattern="[0-9.,]*" autocorrect="off" autocapitalize="none" id="decimalInput">
<script>
const input = document.getElementById('decimalInput');
input.addEventListener('input', function(e) {
  // 按需统一转换逗号为小数点，或者保留原格式
  const normalizedValue = e.target.value.replace(/,/g, '.');
  e.target.value = normalizedValue;
});
</script>

autocorrect="off"和autocapitalize="none"可以避免iOS自动弹出纠错或大写提示，让输入体验更纯粹。

旧设备兜底方案（Hack 性质） #

如果碰到完全不支持inputmode的老旧浏览器/设备，可以用这个动态切换类型的小技巧：

<input type="text" pattern="[0-9.,]*" id="fallbackNumberInput">
<script>
const input = document.getElementById('fallbackNumberInput');
input.addEventListener('focus', function() {
  // 先切换成number类型唤起数字键盘，再快速切回text保证取值正常
  this.type = 'number';
  setTimeout(() => {
    this.type = 'text';
  }, 100);
});
</script>

这个方案可能会有轻微的输入框闪烁，但能解决部分旧设备无法唤起正确键盘的问题，作为兜底选项很合适。

总结一下，优先用第一个方案，它是最规范且兼容性越来越好的选择；如果是iOS环境，加上第二个方案的优化；旧设备再考虑第三个兜底方案。

内容的提问来源于stack exchange，提问作者mpn