前言
做為一個PHPER,難免會遇到那種表單中jQuery限制輸入的問題,比如,限制空格的輸入,只允許輸入數字,以及小數點的控制等等,這里,我們就說一下數字的限制。
jquery代碼
話不多說,直接先上jQuery函數,具體的可以看注釋說明,在使用這個之前,請務必保證已經提前引入了jQuery庫,大家可以自己下載一個jQuery文件,然后引入,也可以查找CDN地址引入,比如在 https://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,"")' />
當然了,還有其他很多校驗規則,可以自己根據實際需求進
行修改和嘗試一下
最后
以上所述是小編給大家介紹的jQuery控制input只能輸入數字和兩位小數的方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!
新聞熱點
疑難解答