如何实现按下逗号时将HTML数字输入切换至小数输入模式

可以实现，核心思路是通过监听键盘事件拦截逗号输入，手动模拟小数点的输入行为并定位光标。

具体代码实现 #

<input type="number" id="decimalInput" step="0.01">

<script>
const input = document.getElementById('decimalInput');

input.addEventListener('keydown', function(e) {
  // 匹配逗号按键（兼容不同键盘布局的keyCode和key值）
  if (e.key === ',' || e.keyCode === 188) {
    e.preventDefault(); // 阻止逗号被输入到框中
    
    const value = this.value;
    // 如果输入框里还没有小数点，添加小数点
    if (!value.includes('.')) {
      this.value = value + '.';
    }
    // 将光标定位到小数点右侧
    const dotIndex = this.value.indexOf('.');
    this.setSelectionRange(dotIndex + 1, dotIndex + 1);
  }
});
</script>

代码说明 #

• 监听输入框的keydown事件，提前拦截逗号按键的默认行为，避免逗号被输入到输入框中。
• 检查当前输入框的值是否已经包含小数点：如果没有，就给当前值追加小数点；如果已有，则跳过追加步骤。
• 无论是否添加了小数点，最后都会将光标自动定位到小数点的右侧，直接进入小数部分的输入状态，和按下点号的体验完全一致。

额外注意事项 #

• 如果你的输入框设置了step属性（比如示例中的step="0.01"），确保它和你期望的小数精度匹配，这样浏览器的上下箭头也能正确调整小数数值。
• 该方案兼容大多数现代浏览器，不需要额外依赖。

内容的提问来源于stack exchange，提问作者Coşkun