jQuery控制input只能輸入數字和兩位小數的方法

更新時間：2019年05月16日 17:13:17 作者：gxcuizy

這篇文章主要介紹了jQuery控制input只能輸入數字和兩位小數的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

前言

做為一個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事件會在鍵盤按鍵被松開時發(fā)生，也就是，這個時候調用我們的函數，來處理已輸入的內容。

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

函數的直接用法之blur

除了上面的監(jiān)控鍵盤事件外，還可以通過監(jiān)控表單的焦點事件來實現，也就是，表單都有獲得焦點事件focus和失去焦點事件blur，我們只需要在失去焦點的時候，調用我們的format_input_num函數就可以了，具體如下：

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

或者不在表單中直接綁定方法，而是去jQuery中通過查找元素節(jié)點，然后單獨綁定相應的事件，并執(zhí)行相關函數

<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,"")' />

當然了，還有其他很多校驗規(guī)則，可以自己根據實際需求進
行修改和嘗試一下

最后

以上所述是小編給大家介紹的jQuery控制input只能輸入數字和兩位小數的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章:

jquery實現ajax加載超時提示的方法
這篇文章主要介紹了jquery實現ajax加載超時提示的方法,涉及jQuery中l(wèi)oad方法的ajax加載超時設置與提示信息處理技巧,需要的朋友可以參考下
2016-07-07
JQuery Tips(3) 關于$()包裝集內元素的改變
JQuery包裝集內的元素在一開始的選定后，還可以通過一系列JQuery提供的方法對包裝集內的元素進行擴充，修改，篩選，刪除find()方法 VS filter()方法
2009-12-12
詳解ajax的data參數錯誤導致頁面崩潰
本篇文章給大家詳細分析了ajax的data參數錯誤導致頁面崩潰的原因以及解決辦法，有需要的朋友參考學習下。
2018-04-04
基于jQuery創(chuàng)建鼠標懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標懸停效果的方法,實例分析了jQuery實現鼠標特效的原理與詳細步驟,具有一定參考借鑒價值,需要的朋友可以參考下
2015-03-03
本篇文章主要對jQuery插件imgAreaSelect實現圖片上傳裁剪（放大縮?。┑氖褂米隽撕喴治稣f明。需要的朋友來看下吧
2016-12-12