input type="number" 保持小数点后面两位

其实下面的方法看起来也很low,但是查了很多资料,也没找到一个完美的方法。

<input type="number" class="number">

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('.number').change(function() {
        let val = parseFloat($(this).val());
        if (isNaN(val)) {
            val = 0;
        }
        $(this).val(val.toFixed(2));
    });
});
</script>

相关:Bootstrap TouchSpin

在查阅input type="number"控制小数点位数相关资料时,看到一个相关的插件还不错。

<input type="number" class="number">

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.bootstrap-touchspin.js"></script>
<script type="text/javascript">
$(function() {
    $(".number").TouchSpin({
        min: 0,
        max: 100,
        step: 0.1,
        decimals: 2,
        boostat: 5,
        maxboostedstep: 10,
        postfix: '%'
    });
});
</script>

Settings:

OPTIONDEFAULTDESCRIPTION
initval“”Applied when no explicit value is set on the input with the value attribute. Empty string means that the value remains empty on initialization.
min0Minimum value.
max100Maximum value.
step1Incremental/decremental step on up/down change.
forcestepdivisibility‘round’How to force the value to be divisible by step value: ‘none’
decimals0Number of decimal points.
stepinterval100Refresh rate of the spinner in milliseconds.
stepintervaldelay500Time in milliseconds before the spinner starts to spin.
verticalbuttonsfalseEnables the traditional up/down buttons.
verticalupclass‘glyphicon glyphicon-chevron-up’Class of the up button with vertical buttons mode enabled.
verticaldownclass‘glyphicon glyphicon-chevron-down’Class of the down button with vertical buttons mode enabled.
prefix“”Text before the input.
postfix“”Text after the input.
prefix_extraclass“”Extra class(es) for prefix.
postfix_extraclass“”Extra class(es) for postfix.
boostertrueIf enabled, the the spinner is continually becoming faster as holding the button.
boostat10Boost at every nth step.
maxboostedstepfalseMaximum step when boosted.
mousewheeltrueEnables the mouse wheel to change the value of the input.
buttondown_class‘btn btn-default’Class(es) of down button.
buttonup_class‘btn btn-default’Class(es) of up button.
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值