HTML数字输入框输入句号时光标跳至开头的问题及修复方法

你遇到的问题根源在于：直接用this.value=this.value.slice(0,5)赋值时，打断了浏览器对<input type="number">输入小数点的默认处理逻辑——首次输入句号时，浏览器还没完成值的同步和光标定位，就被强制截断，导致光标跳转到开头且值未正确设置。

以下是修复后的实现方案，兼顾长度限制、光标位置保留和数字格式合理性：

<input type="number" oninput="handleNumberInput(this)">
<script>
function handleNumberInput(input) {
  // 记录当前光标位置
  const cursorPosition = input.selectionStart;
  let inputValue = input.value || '';

  // 仅当内容长度超过5时进行截断处理
  if (inputValue.length > 5) {
    // 截断到5位字符
    inputValue = inputValue.slice(0, 5);
    // 确保输入值最多包含一个小数点（避免截断后出现多个小数点）
    const dotIndex = inputValue.indexOf('.');
    if (dotIndex !== -1 && inputValue.indexOf('.', dotIndex + 1) !== -1) {
      inputValue = inputValue.slice(0, inputValue.lastIndexOf('.')) + inputValue.slice(inputValue.lastIndexOf('.') + 1);
    }
    input.value = inputValue;
    // 恢复光标位置，避免跳转到输入框开头
    input.setSelectionRange(cursorPosition, cursorPosition);
  }
}
</script>

关键修复点说明： #

• 光标位置保留：在处理值之前记录光标位置，赋值完成后恢复，避免光标异常跳转；
• 格式合理性处理：额外判断并移除多余的小数点，符合数字输入框的预期格式；
• 条件触发截断：仅当内容长度超过限制时才处理，减少对浏览器默认行为的干扰。

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