代碼片斷之jQuery控制input只能輸入數字和兩位小數

前言

作爲一個PHPER，不免會遇到那種表單中jQuery限制輸入的問題，好比，限制空格的輸入，只容許輸入數字，以及小數點的控制等等，這裏，咱們就說一下數字的限制。

jquery代碼

話很少說，直接先上jQuery函數，具體的能夠看註釋說明，在使用這個以前，請務必保證已經提早引入了jQuery庫，你們能夠本身下載一個jQuery文件，而後引入，也能夠查找CDN地址引入，好比在www.bootcdn.cn/jquery/能夠查找到不少版本的引入地址，直接找到你想要的引入就行。

<script>
    // 格式化限制數字文本框輸入，只能數字或者兩位小數
    function format_input_num(obj){
        // 清除"數字"和"."之外的字符
        obj.value = obj.value.replace(/[^\d.]/g,"");
        // 驗證第一個字符是數字
        obj.value = obj.value.replace(/^\./g,"");
        // 只保留第一個, 清除多餘的
        obj.value = obj.value.replace(/\.{2,}/g,".");
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        // 只能輸入兩個小數
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
    }
</script>
複製代碼

函數的直接用法之onkeyup

在input表單輸入中，限制最多隻能保留兩位小數點，其餘自動抹掉；這裏會用到onkeyup事件，也就是onkeyup事件會在鍵盤按鍵被鬆開時發生，也就是，這個時候調用咱們的函數，來處理已輸入的內容。

<input type="text" onkeyup="format_input_num(this)" value="" size="10" />元
複製代碼

函數的直接用法之blur

除了上面的監控鍵盤事件外，還能夠經過監控表單的焦點事件來實現，也就是，表單都有得到焦點事件focus和失去焦點事件blur，咱們只須要在失去焦點的時候，調用咱們的format_input_num函數就能夠了，具體以下：

<input type="text" onblur="format_input_num(this)" value="" size="10" />元
複製代碼

或者不在表單中直接綁定方法，而是去jQuery中經過查找元素節點，而後單獨綁定相應的事件，並執行相關函數

<input type="text" value="" size="10" id="money" />元
<script>
    $("#money").off('blur').on('blur', function(){
        format_input_num(this);
    });
</script>
複製代碼

其餘輸入限制

限制只能輸入數字的寫法，也就是，只能輸入0-9的數字

<input type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")' />
複製代碼

限制只能輸入數字、字母和橫線"-"，其中字母包括大小寫

<input type="text" onkeyup='value=value.replace(/[^A-Za-z0-9\-]+/g,"")' />
複製代碼

固然了，還有其餘不少校驗規則，能夠本身根據實際需求進行修改和嘗試一下

最後

這就是我分享CODING過程當中的一些代碼片斷，有不對或者須要優化的地方，你們能夠給我留言。

感謝www.cnblogs.com/angto64/p/5…