jQuery控制input只能輸入數(shù)字和兩位小數(shù)的方法
前言
做為一個PHPER，難免會遇到那種表單中jQuery限制輸入的問題，比如，限制空格的輸入，只允許輸入數(shù)字，以及小數(shù)點的控制等等，這里，我們就說一下數(shù)字的限制。
jquery代碼
話不多說，直接先上jQuery函數(shù)，具體的可以看注釋說明，在使用這個之前，請務必保證已經(jīng)提前引入了jQuery庫，大家可以自己下載一個jQuery文件，然后引入，也可以查找CDN地址引入，比如在 https://www.bootcdn.cn/jquery/ 可以查找到很多版本的引入地址，直接找到你想要的引入就行。
<script>
// 格式化限制數(shù)字文本框輸入，只能數(shù)字或者兩位小數(shù)
function format_input_num(obj){
// 清除"數(shù)字"和"."以外的字符
obj.value = obj.value.replace(/[^\d.]/g,"");
// 驗證第一個字符是數(shù)字
obj.value = obj.value.replace(/^\./g,"");
// 只保留第一個, 清除多余的
obj.value = obj.value.replace(/\.{2,}/g,".");
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
// 只能輸入兩個小數(shù)
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
}
</script>
函數(shù)的直接用法之onkeyup
在input表單輸入中，限制最多只能保留兩位小數(shù)點，其他自動抹掉；這里會用到onkeyup事件，也就是onkeyup事件會在鍵盤按鍵被松開時發(fā)生，也就是，這個時候調(diào)用我們的函數(shù)，來處理已輸入的內(nèi)容。
<input type="text" onkeyup="format_input_num(this)" value="" size="10" />元
函數(shù)的直接用法之blur
除了上面的監(jiān)控鍵盤事件外，還可以通過監(jiān)控表單的焦點事件來實現(xiàn)，也就是，表單都有獲得焦點事件focus和失去焦點事件blur，我們只需要在失去焦點的時候，調(diào)用我們的format_input_num函數(shù)就可以了，具體如下：
<input type="text" onblur="format_input_num(this)" value="" size="10" />元
或者不在表單中直接綁定方法，而是去jQuery中通過查找元素節(jié)點，然后單獨綁定相應的事件，并執(zhí)行相關(guān)函數(shù)
<input type="text" value="" size="10" id="money" />元
<script>
$("#money").off('blur').on('blur', function(){
format_input_num(this);
});
</script>
其他輸入限制
限制只能輸入數(shù)字的寫法，也就是，只能輸入0-9的數(shù)字
<input type="text" onkeyup='this.value=this.value.replace(/\D/gi,"")' />
限制只能輸入數(shù)字、字母和橫線"-"，其中字母包括大小寫
<input type="text" onkeyup='value=value.replace(/[^A-Za-z0-9\-]+/g,"")' />
當然了，還有其他很多校驗規(guī)則，可以自己根據(jù)實際需求進
行修改和嘗試一下
最后
以上所述是小編給大家介紹的jQuery控制input只能輸入數(shù)字和兩位小數(shù)的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
- 如何用input標簽和jquery實現(xiàn)多圖片的上傳和回顯功能
- Jquery把獲取到的input值轉(zhuǎn)換成json
- jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法
- jQuery實現(xiàn)給input綁定回車事件的方法
- jQuery通過改變input的type屬性實現(xiàn)密碼顯示隱藏切換功能
- jquery實現(xiàn)input框獲取焦點的簡單實例
- jquery獲取input type=text中的值的各種方式(總結(jié))
- jquery動態(tài)創(chuàng)建div與input的實例代碼
- 解決html input驗證只能輸入數(shù)字,不能輸入其他的問題
- js 限制input只能輸入數(shù)字、字母和漢字等等
- 使用正則限制input框只能輸入數(shù)字/英文/中文等等
- Angular限制input框輸入金額（是小數(shù)的話只保留兩位小數(shù)點）
- JS通過正則限制 input 輸入框只能輸入整數(shù)、小數(shù)(金額或者現(xiàn)金) 兩位小數(shù)
相關(guān)文章
簡單地記下jquery實現(xiàn)回車事件，學習jquery的朋友可以參考下。2011-08-08
基于Jquery+Ajax+Json實現(xiàn)分頁顯示附效果圖
后臺action產(chǎn)生json數(shù)據(jù)，js獲取json數(shù)據(jù)分頁顯示，詳細的示例代碼如下，需要的朋友可以學習下2014-07-07
如果在domready之后用js動態(tài)添加幾行，那新增的幾行中的這些按鈕都將失去任何作用，下面與大家分享四種解決方法2014-06-06
JS·經(jīng)典·炫彩菜單(動畫效果) for jquery2010-01-01
瀏覽器特性檢測即通過探測對象是否擁有某個屬性或者函數(shù)，或者通過其他的編碼探測方式，來決定其是否支持某一功能、特性。2010-11-11
這篇文章主要介紹了jquery簡單倒計時實現(xiàn)方法,涉及jQuery定時函數(shù)操作及日期與實現(xiàn)的運算技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
本文將利用jquery實現(xiàn)頁面圖片等比例放大和縮小。說明: 頁面中經(jīng)常需要將未知大小的圖片展示在有限的空間里, 如果直接指定圖片的width和height值, 就有可能造成圖片走樣, 這段代碼就是為解決這個問題設計2014-02-02
這篇文章主要介紹了jQuery unbind()方法,結(jié)合實例形式詳細分析了unbind方法解除綁定的使用技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery中outerWidth()方法用法,實例分析了outerWidth()方法的功能、定義及獲取第一個匹配元素外部寬度的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了jQuery表單元素選擇器代碼實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02