一、使用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()方法，保留小数点后两位，并将结果返回。这样就可以实现输入数字和小数的限制，并限制小数位数。
原创文章，作者：QEGQJ，如若转载，请注明出处：https://www.506064.com/n/330909.html
微信扫一扫 
支付宝扫一扫 