把数字输入框符号输入扼杀在摇篮里

2023-03-30 08:46:11

数字输入框符号输入限制：从入门到精通

在构建表单时，数字输入框是一个常见的元素。虽然 HTML5 中的 type=number 输入框旨在限制输入数字，但它仍然允许输入加减符号，这可能会给需要严格限制输入数字的应用带来问题。本文将深入探讨数字输入框符号输入限制的技巧，从基础的正则表达式过滤符号到高级的输入框格式化和验证。

正则表达式过滤符号

要过滤掉加减符号，我们可以借助正则表达式。正则表达式是一种强大的字符串处理工具，它允许我们匹配和替换字符串中的内容。下面是一个使用正则表达式过滤加减符号的代码示例：

const input = document.querySelector('input[type="number"]');

input.addEventListener('input', (event) => {
  const value = event.target.value;
  const newValue = value.replace(/[-+]/g, '');
  input.value = newValue;
});

这段代码首先获取数字输入框元素，然后监听其 input 事件。当输入框的值发生变化时，我们使用 replace() 方法将加减符号替换为空字符串，并将其重新赋值给输入框的值。

输入框格式化

除了限制符号输入，我们还可以对输入框进行格式化，例如添加千分位分隔符或限制小数点保留几位。这可以通过正则表达式或 JavaScript 库来实现。下面是一个使用正则表达式实现千分位分隔符的代码示例：

const input = document.querySelector('input[type="number"]');

input.addEventListener('input', (event) => {
  const value = event.target.value;
  const newValue = value.replace(/[-+]/g, '');
  input.value = newValue;
  const formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  input.value = formattedValue;
});

这段代码使用 replace() 方法将数字每三位加一个逗号分隔符。

输入框验证

最后，我们还可以对输入框进行验证，例如检查输入的数字是否在某个范围内、是否符合某个正则表达式。这可以通过 JavaScript 或表单验证库来实现。下面是一个使用 JavaScript 进行范围验证的代码示例：

const input = document.querySelector('input[type="number"]');

input.addEventListener('input', (event) => {
  const value = event.target.value;
  const newValue = value.replace(/[-+]/g, '');
  input.value = newValue;
  const formattedValue = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  input.value = formattedValue;

  if (value < 0 || value > 100) {
    input.setCustomValidity('请输入0到100之间的数字');
  } else {
    input.setCustomValidity('');
  }
});