如何实现input框只能输入数字

一、input框只能输入数字和小数

有时候，我们需要一个input框只能输入数字和一个小数点，这种情况下，一种常见的实现方式是使用正则表达式进行验证。

function validateNumberInput(inputValue) {
  const regex = /^\d*\.?\d*$/; // 验证输入值是否为数字和小数
  return regex.test(inputValue);
}

const inputNumber = document.getElementById('input-number');
inputNumber.addEventListener('input', function (e) {
  const inputValue = e.target.value;
  if (!validateNumberInput(inputValue)) {
    e.target.value = inputValue.slice(0, -1);
  }
});

上述代码中，我们首先定义了一个正则表达式，该正则表达式的含义是匹配所有由数字和小数点组成的字符串，然后我们在input事件中将用户输入的值传入该正则表达式中进行匹配，如果不匹配，则将最后一个字符移除。

二、input框只能输入数字 正则验证

如果仅仅需要一个input框只能输入数字，无需小数点和其他特殊字符，这种情况下，就可以使用不同的正则表达式进行验证。

function validateNumberInput(inputValue) {
  const regex = /^\d*$/; // 验证输入值是否为数字
  return regex.test(inputValue);
}

const inputNumber = document.getElementById('input-number');
inputNumber.addEventListener('input', function (e) {
  const inputValue = e.target.value;
  if (!validateNumberInput(inputValue)) {
    e.target.value = inputValue.slice(0, -1);
  }
});

与第一种情况类似，我们只需要将正则表达式中的小数点去掉，即可实现input框只能输入数字。

三、input框只能输入整数

如果需要实现input框只能输入整数，可以考虑结合第二种情况的正则表达式，加上input事件的blur事件即可实现。

function validateIntegerInput(inputValue) {
  const regex = /^\d*$/; // 验证输入值是否为数字
  return regex.test(inputValue);
}

const inputInteger = document.getElementById('input-integer');
inputInteger.addEventListener('blur', function (e) {
  const inputValue = e.target.value;
  if (!validateIntegerInput(inputValue)) {
    e.target.value = '';
  }
});

在上述代码中，我们将input框的输入事件改为blur事件，当用户离开输入框时，通过正则表达式验证输入值是否为数字，如果不是，则清空该input框的输入值。

四、设置input框只能输入数字

当使用第一种或第二种情况的正则表达式时，可以通过设置input框的type属性为number实现只能输入数字的效果。

const inputNumber = document.getElementById('input-number');
inputNumber.setAttribute('type', 'number');

上述代码中，我们通过setAttribute()方法将input框的type属性设置为number，即可实现input框只能输入数字。

五、自定义组件input只能输入数字

如果是使用自定义组件的方式生成input框，则可以在组件内部实现只能输入数字的逻辑。

<template>
  <div>
    <input v-model="value" @input="onInput" />
  </div>
</template>

<script>
export default {
  name: 'CustomNumberInput',
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  methods: {
    onInput(event) {
      const inputValue = event.target.value;
      const regex = /^\d*\.?\d*$/;
      if (regex.test(inputValue)) {
        this.$emit('input', inputValue);
      } else {
        event.target.value = inputValue.slice(0, -1);
      }
    },
  },
};
</script>

上述代码中，我们定义了一个名为CustomNumberInput的组件，在组件的onInput()方法中实现了只能输入数字的逻辑。通过v-model和@input指令，将组件的value和onInput()方法与外部进行绑定。

六、input设置只能输入数字

如果使用input组件，也可以在组件内部设置只能输入数字。

<input v-model="value" @input="onInput" onkeypress="return (event.keyCode >= 48 && event.keyCode <= 57)" />

<script>
export default {
  name: 'NumberInput',
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  methods: {
    onInput(event) {
      const inputValue = event.target.value;
      this.$emit('input', inputValue);
    },
  },
};
</script>

在上述代码中，我们在input组件上添加一个onkeypress事件，该事件会在用户按下按键后触发，并调用return语句判断按键是否为数字，并返回true或false。在组件的onInput()方法中将输入值传入外部使用。

七、input只允许输入数字

如果需要的只是简单的input框只能输入数字，而无需进行更多的自定义，可以使用一些现成的插件或库。

<input type="text" pattern="[0-9]*" />

在上述代码中，我们使用了input框的pattern属性，该属性用于指定input框接受的输入值的正则表达式。通过该属性，我们可以轻松实现input框只能输入数字的效果。

八、html只能输入数字

除了使用input框外，HTML5还支持一些其他的方法用来实现只能输入数字的效果。比如使用number类型的input框、使用min和max属性等等。

<input type="number" min="0" max="100" step="1" />

在上述代码中，我们使用了number类型的input框，并设置了该框的min和max属性，用于规定用户输入值的取值范围。通过该框，我们还可以通过step属性来设置输入值的步长。

总结

上述文章中，我们通过多个方面对input框只能输入数字进行了详细的阐述。无论是使用正则表达式、自定义组件、HTML属性还是现成的插件，都可以实现input框只能输入数字的效果。根据具体需求，选择不同的方法进行实现即可。