限制input小數點及位數

時間 2019-12-04

標籤限制 input 小數點位數简体版

原文原文鏈接

HTMLhtml

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>小數點限制</title>
    <meta content="app-id=518966501" name="apple-itunes-app" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
</head>

<body>
    <div class="bd">
    <form id="itemForm" onsubmit="return false">
        <div class="cont">
            <div class="on1">
                兩位小數：<input class="js_type" class="price" field="price" name="price" type="number" step="0.01" placeholder="0">
                正整數：<input class="js_stock" class="price" field="price" name="price" type="tel" placeholder="0">
            </div>
        </div>
    </form>    
    </div>
    <script src="http://zeptojs.com/zepto.min.js"></script> 
    <script src="amount_input.js"></script>
</body>
<script>
var cont={
    init: function(){
        this.item_price();
    }, 
    item_price: function() {    
        amountInput("#itemForm",".js_type");
        //限定爲正整數
        $("#itemForm").on("keyup",".js_stock",function(){
            var num = this.value.replace(/[^\d]/g,'');
            console.log(this.value);
            if(num === ''){
                this.value = '';
                return;
            }else{
                this.value = parseInt(num);
            }           
        });
    },
}
$(document).ready(function(){
    cont.init();
})
</script>

</html>

JSweb

function amountInput(parent,child) {
    var CashingAmountLast = "";

    $moneyInput = ""; //動態添加了內容  要用事件委託方式綁定下面的事件

    function checkCode(code) {
        var codeArea = code > 57 && code < 96;
        if (!(code == 190 || code == 110 || code == 46 || code == 8 || code == 37 || code == 39)) {
            if (codeArea || code < 48 || code > 105) {
                return false;
            }
        }
        return true;
    }
    
    $(parent).on("keydown", child, function(e) {
        var code = e.keyCode,
            val = e.target.value;
        if (val.indexOf(".") > -1 && (code == 190 || code == 110)) {
            e.target.value = val;
            return false;
        }
        if (!checkCode(code)) {
            return false;
        }
        this.setAttribute("data-keyCode", code);
        return true;
    }).on("input",child, function(e) {
        var val = this.value,
            keyCode = this.getAttribute("data-keyCode"),
            reSet = false;
        if (e.currentTarget.validity.valid) {
            if (val.indexOf(".") < 0 && (keyCode == 190 || keyCode == 110)) {
                val += ".";
            }
        } else {
            val = CashingAmountLast;
            if ((keyCode == 190 || keyCode == 110) && val.indexOf(".") < 0) {
                val = Number(CashingAmountLast).toFixed(1);
            }
            reSet = true;
        }
        fixCashFn.call(this,val, reSet);
    }).on("blur", child,function(e) {
        var val = Number($(this).val());
        if (!isNaN(val)) {
            e.target.value = val;
        } else {
            e.target.value = 0;
        }
    });

    function fixCashFn(a, isReset) {
        let money = typeof a === "string" ? a : a.toString(),
            flag = false,
            valArr = [],
            _slef = this;
        money = money.replace(/\s/g, "");
        var strLen = money.length;
        if (isNaN(Number(money))) {
            flag = true;
        } else if (strLen > 0) {
            //保留至多兩個小數點的數字
            if (!/^\d+(?:\.\d{1,2})?$/.test(money) && money.charAt(strLen - 1) !== ".") {
                flag = true;
            }
        }
        if (flag) {
            money = CashingAmountLast;
        }
        if (isNaN(Number(money))) {
            money = "";
        }
        (function() {
            if (money.length > 0) {
                valArr = money.split(".");
                money = Number(valArr[0]).toString().slice(0, 10);
                if (valArr.length > 1) {
                    money += "." + valArr[1].slice(0, 2);
                }
            }
            if (money.charAt(money.length - 1) !== ".") {
                if (a !== money) {
                    $(_slef).val(money);
                    CashingAmountLast = money;
                } else {
                    CashingAmountLast = a;
                }
            }
            if (isReset) {
                $(_slef).val(money);
            }
        })();
    }
}