如何限制input输入数字和小数

发布时间：2023-05-18

一、使用HTML5标准的input类型

HTML5标准提供了多种input类型，其中包括number和email等特殊类型，可以限制input输入数字和小数。通过设置input的type属性，就可以实现输入数字和小数的限制。

<label>请输入数字:</label>
<input type="number" step="0.01" name="num">

step属性可以设置小数位数。 通过以上代码，设置input的type为number，就可以在输入框中只允许输入数字和小数点，同时通过设置step属性，还可以实现小数位数的限制。

二、使用正则表达式进行限制

除了使用HTML5标准的input类型进行限制，还可以使用正则表达式来限制input只能输入数字和小数。

<label>请输入数字:</label>
<input type="text" name="num" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')">

onkeyup事件可以动态限制输入。 通过以上代码，设置input的type为text，并通过onkeyup事件实现了实时限制输入。在onkeyup事件中，通过正则表达式，筛选出非数字和小数点的字符，将其替换为空字符，从而实现了限制输入的效果。

三、使用jQuery插件进行限制

除了使用HTML5标准和正则表达式进行限制，还可以使用jQuery插件进行限制。jQuery插件中有多款可以限制input输入数字和小数的插件，其中比较常用的是jQuery Mask Plugin和jQuery Number Plugin。

<label>请输入数字:</label>
<input type="text" name="num" class="input-number">
<script>
  $('.input-number').mask('000.00', {reverse:true}); // 使用jQuery Mask Plugin插件实现输入数字和小数的限制
</script>

通过以上代码，设置input的type为text，并添加了class为input-number。通过运用jQuery Mask Plugin插件，设置了输入格式为，整数部分和小数部分各占三位，并且小数部分在前面，整数部分在后面，这样就可以实现输入数字和小数的限制。同样，也可以使用jQuery Number Plugin插件来实现相似的效果。

四、使用Vue.js框架进行限制

除了使用传统的HTML和jQuery限制输入外，还可以使用Vue.js框架，通过数据绑定和计算属性，实现输入的限制。

<label>请输入数字:</label>
<input type="text" name="num" v-model="inputNum">
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      inputNum: '',
    },
    computed: {
      formattedNum: function() {
        return parseFloat(this.inputNum).toFixed(2); // 使用toFixed()方法，保留小数点后两位
      }
    }
  });
</script>

通过以上代码，使用Vue.js框架，将input的value值与data中的inputNum绑定。而通过计算属性computed，将inputNum经过parseFloat()方法转换成数字类型之后，使用toFixed()方法，保留小数点后两位，并将结果返回。这样就可以实现输入数字和小数的限制，并限制小数位数。

推荐文章