如何限制input的小数位数?

2017-10-16 · 🙈Lei · 0条 · 586次

Html5中新增加了一个属性step,可以规定input中数值的变化间隔,step=3的话,input的值可以是-6,-3,0,3,6,...把step设置为0.01,那么小数就是2位,设置为0.001,小数位数就是3位,依此类推。

但是这个并不能完全实现我们对input中数值小数位数的限制,所以我们使用下面的js代码来确保实现此功能:

//小数限制
(function($) { //n是小数位数
$.fn.currencyFormatDecimal = function(n) {
this.each( function( i ) {
if( isNaN( parseFloat( this.value ) ) ) return;
if(this.value.toString().split(".")[1].length > n){
this.value = parseFloat(this.value).toFixed(n);
}
});
return this; //for chaining
}
})( jQuery );

使用方法如下:

<input type="number" class="free-numberic"/>
<script>
(function($) {
    $('.free-numberic').attr('step', '0.01'); //第一层限制:属性限制
$('.free-numberic').bind('input propertychange', function(){//第二层限制:jquery限制
$(this).currencyFormatDecimal(2); //小数位数是4位
});
})( jQuery ); </script>






  0