数字文本输入框仅允许输入数字和点号的方法

2024-03-03 01:30:45

数字文本输入框：仅允许输入数字和点号

作为一名经验丰富的程序员，我经常需要创建文本输入框，以允许用户输入数值。为了确保数据的准确性和一致性，限制输入内容仅限于数字和点号至关重要。本文将讨论实现仅允许数字和点号输入的文本输入框的三种方法，并探讨其最佳实践。

HTML 属性

HTML 中有一个名为 inputmode 的属性，允许指定输入字段的输入模式。要限制输入仅为数字和点号，可以使用以下值：

<input type="text" inputmode="numeric">

这种方法纯粹基于 HTML，不需要任何额外的 JavaScript 代码。

JavaScript 事件监听器

另一种方法是使用 JavaScript 事件监听器捕获用户输入并验证字符。可以使用以下代码：

<input type="text" id="number-input">

<script>
  document.getElementById("number-input").addEventListener("keypress", function(e) {
    // 仅允许数字、点号和退格键
    if ((e.key >= '0' && e.key <= '9') || e.key === '.' || e.key === 'Backspace') {
      return true;
    } else {
      // 禁止其他字符
      e.preventDefault();
      return false;
    }
  });
</script>

正则表达式验证

还可以使用正则表达式来验证输入。可以使用以下 JavaScript 代码：

<input type="text" id="number-input">

<script>
  document.getElementById("number-input").addEventListener("input", function() {
    // 允许数字、点号和负号
    const regex = /^[\d.-]+$/;
    if (!regex.test(this.value)) {
      // 输入无效，回滚到上次有效值
      this.value = this.value.slice(0, -1);
    }
  });
</script>