如何限制文本输入框仅允许输入数字及小数点？

以下是针对需求的具体实现方案，纯前端JavaScript就能搞定，不用依赖任何框架：

HTML 结构 #

<input type="text" id="numberInput" placeholder="请输入数字（支持小数点）">

JavaScript 逻辑 #

const numberInput = document.getElementById('numberInput');

numberInput.addEventListener('input', function(e) {
  // 记录当前光标位置，避免过滤后光标跳走
  const cursorPosition = this.selectionStart;
  // 第一步：过滤掉所有非数字、非小数点的字符
  let cleanedValue = this.value.replace(/[^0-9.]/g, '');
  // 第二步：确保整个输入框只有一个小数点（去掉重复的）
  cleanedValue = cleanedValue.replace(/(\..*)\./g, '$1');
  
  // 如果处理后的值和原输入不同，更新输入框
  if (cleanedValue !== this.value) {
    this.value = cleanedValue;
    // 恢复光标到原来的位置，提升体验
    this.setSelectionRange(cursorPosition, cursorPosition);
  }
});

代码说明 #

• 第一个正则/[^0-9.]/g：直接把所有字母、特殊符号（除了小数点）都过滤掉，满足禁止输入字母和无关特殊字符的要求。
• 第二个正则/(\..*)\./g：匹配已经出现小数点后再次输入的小数点，只保留第一个小数点，防止出现多个小数点的情况（比如12..3会被处理成12.3）。
• 光标位置处理：避免用户输入非法字符后，光标自动跳到输入框末尾，保持输入的连贯性。

可选优化（按需添加） #

如果需要禁止整数部分出现多个前置0（比如0012这种输入），可以在代码里加一段处理逻辑：

// 处理整数部分前置多个0的情况
if (cleanedValue.startsWith('0') && cleanedValue.length > 1 && cleanedValue.charAt(1) !== '.') {
  cleanedValue = cleanedValue.replace(/^0+/, '0');
}

这段代码会把0012转换成0，把0012.34转换成012.34（如果需要完全去掉前置0，可以把替换规则改成replace(/^0+/, '')，但要注意空值的情况，比如输入000会变成空，需要额外判断）。

这个方案兼容性很好，所有现代浏览器以及IE9+都能正常运行，完全满足你的需求。

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