jQuery控制input只能輸入數(shù)字和兩位小數(shù)的方法
前言
做為一個(gè)PHPER,難免會(huì)遇到那種表單中jQuery限制輸入的問題,比如,限制空格的輸入,只允許輸入數(shù)字,以及小數(shù)點(diǎn)的控制等等,這里,我們就說一下數(shù)字的限制。
jquery代碼
話不多說,直接先上jQuery函數(shù),具體的可以看注釋說明,在使用這個(gè)之前,請(qǐng)務(wù)必保證已經(jīng)提前引入了jQuery庫(kù),大家可以自己下載一個(gè)jQuery文件,然后引入,也可以查找CDN地址引入,比如在 https://www.bootcdn.cn/jquery/ 可以查找到很多版本的引入地址,直接找到你想要的引入就行。
<script> // 格式化限制數(shù)字文本框輸入,只能數(shù)字或者兩位小數(shù) function format_input_num(obj){ // 清除"數(shù)字"和"."以外的字符 obj.value = obj.value.replace(/[^\d.]/g,""); // 驗(yàn)證第一個(gè)字符是數(shù)字 obj.value = obj.value.replace(/^\./g,""); // 只保留第一個(gè), 清除多余的 obj.value = obj.value.replace(/\.{2,}/g,"."); obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); // 只能輸入兩個(gè)小數(shù) obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); } </script>
函數(shù)的直接用法之onkeyup
在input表單輸入中,限制最多只能保留兩位小數(shù)點(diǎn),其他自動(dòng)抹掉;這里會(huì)用到onkeyup事件,也就是onkeyup事件會(huì)在鍵盤按鍵被松開時(shí)發(fā)生,也就是,這個(gè)時(shí)候調(diào)用我們的函數(shù),來處理已輸入的內(nèi)容。
<input type="text" onkeyup="format_input_num(this)" value="" size="10" />元
函數(shù)的直接用法之blur
除了上面的監(jiān)控鍵盤事件外,還可以通過監(jiān)控表單的焦點(diǎn)事件來實(shí)現(xiàn),也就是,表單都有獲得焦點(diǎn)事件focus和失去焦點(diǎn)事件blur,我們只需要在失去焦點(diǎn)的時(shí)候,調(diào)用我們的format_input_num函數(shù)就可以了,具體如下:
<input type="text" onblur="format_input_num(this)" value="" size="10" />元
或者不在表單中直接綁定方法,而是去jQuery中通過查找元素節(jié)點(diǎn),然后單獨(dú)綁定相應(yīng)的事件,并執(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,"")' />
當(dāng)然了,還有其他很多校驗(yàn)規(guī)則,可以自己根據(jù)實(shí)際需求進(jìn)
行修改和嘗試一下
最后
以上所述是小編給大家介紹的jQuery控制input只能輸入數(shù)字和兩位小數(shù)的方法,希望對(duì)大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
- 如何用input標(biāo)簽和jquery實(shí)現(xiàn)多圖片的上傳和回顯功能
- Jquery把獲取到的input值轉(zhuǎn)換成json
- jQuery實(shí)現(xiàn)動(dòng)態(tài)添加、刪除按鈕及input輸入框的方法
- jQuery實(shí)現(xiàn)給input綁定回車事件的方法
- jQuery通過改變input的type屬性實(shí)現(xiàn)密碼顯示隱藏切換功能
- jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的簡(jiǎn)單實(shí)例
- jquery獲取input type=text中的值的各種方式(總結(jié))
- jquery動(dòng)態(tài)創(chuàng)建div與input的實(shí)例代碼
- 解決html input驗(yàn)證只能輸入數(shù)字,不能輸入其他的問題
- js 限制input只能輸入數(shù)字、字母和漢字等等
- 使用正則限制input框只能輸入數(shù)字/英文/中文等等
- Angular限制input框輸入金額(是小數(shù)的話只保留兩位小數(shù)點(diǎn))
- JS通過正則限制 input 輸入框只能輸入整數(shù)、小數(shù)(金額或者現(xiàn)金) 兩位小數(shù)
相關(guān)文章
jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)ajax加載超時(shí)提示的方法,涉及jQuery中l(wèi)oad方法的ajax加載超時(shí)設(shè)置與提示信息處理技巧,需要的朋友可以參考下2016-07-07JQuery Tips(3) 關(guān)于$()包裝集內(nèi)元素的改變
JQuery包裝集內(nèi)的元素在一開始的選定后,還可以通過一系列JQuery提供的方法對(duì)包裝集內(nèi)的元素進(jìn)行擴(kuò)充,修改,篩選,刪除find()方法 VS filter()方法2009-12-12詳解ajax的data參數(shù)錯(cuò)誤導(dǎo)致頁(yè)面崩潰
本篇文章給大家詳細(xì)分析了ajax的data參數(shù)錯(cuò)誤導(dǎo)致頁(yè)面崩潰的原因以及解決辦法,有需要的朋友參考學(xué)習(xí)下。2018-04-04基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。?/a>
本篇文章主要對(duì)jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪(放大縮?。┑氖褂米隽撕?jiǎn)要分析說明。需要的朋友來看下吧2016-12-12jquery 單引號(hào)和雙引號(hào)的區(qū)別及使用注意
在js中單引號(hào)和雙引號(hào)都是一樣的,平時(shí)使用的時(shí)候盡量用單引號(hào),只有碰到嵌套的時(shí)候才會(huì)同時(shí)用兩種引號(hào),感興趣的朋友可以了解下2013-07-07Jquery顯示和隱藏元素或設(shè)為只讀(含Ligerui的控件禁用,實(shí)例說明介紹)
本篇文章是對(duì)Jquery中顯示和隱藏元素或設(shè)為只讀以及Ligerui的控件禁用實(shí)現(xiàn)代碼進(jìn)行了分析介紹,需要的朋友可以參考下2013-07-07使用jQuery制作Web頁(yè)面遮罩層插件的實(shí)例教程
GitHub上人們分享的遮罩層插件也是玲瑯滿目,不過自己動(dòng)手做一個(gè)的話肯定更復(fù)合自己的需求,這里就帶大家來看使用jQuery制作Web頁(yè)面遮罩層插件的實(shí)例教程,需要的朋友可以參考下2016-05-05Hallo.js基于jQuery UI所見即所得的Web編輯器
Hallo.js是一個(gè)簡(jiǎn)單的富文本編輯器,基于jQuery UI的部件,利用HTML5的contentEditable功能實(shí)現(xiàn)了即時(shí)編輯功能,其主要目的是為了提供良好的書寫體驗(yàn),對(duì)Hallo.js感興趣的小伙伴們可以參考一下2016-01-01使用JQUERY進(jìn)行后臺(tái)頁(yè)面布局控制DIV實(shí)現(xiàn)左右式
一個(gè)網(wǎng)站的后臺(tái)使用frame框架來實(shí)現(xiàn)這種形式,這邊作者不是使用的frame而是純div進(jìn)行布局,下面看下具體的實(shí)現(xiàn)代碼2014-01-01