一 需求
- 限制input的輸入,只接收數字和小數點
- 限制輸入位數
二 分析
- 個人觀點:這是一個坑爹的需求,限制輸入有很多bug,而且用戶體驗也很差,監聽keypress事件會浪費很多性能
- 實現原理:雖然很坑爹,但是還是要做一下的,實現原理就是通過鍵盤的監聽,阻止不必要的輸入
- 實現方式:jQuery插件方式,現在工作中基本離不開jQuery,雖然有人說這很不好,但是我必須的用啊,因為我很low
三 代碼和注釋
- 基本上注釋已經很全面了
- 基本上邏輯還是有點混亂的,只供參考,不喜歡的需求也就能搞成這樣了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test input</title>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script type="text/javascript">
;(function($){
$.fn.extend({
numberInput:function(zs,xs){
//取節點,並過濾出 text和number
node = $(this).filter("input[type='text'],input[type='number']");
//檢測節點,如果沒有合適的節點,啥也不干
if(!node.length) return;
//整數部分默認值為1 ,如果輸入0也會變成1
zs = zs || 1;
//小數位默認值是0
xs = xs || 0;
//綁定事件,綁定之前先解綁一下,免得重復綁定
node.off("keypress.sjsplugin")
//有小數部分和沒有小數部分,綁定不同的函數,提高效能
if(xs != 0){
node.on("keypress.sjsplugin",function(e) {
var keyCode = e.keyCode; //保存keyCode
//獲取當前輸入狀態
var text = $(this).val();
//只接收數字和小數點
if(!((keyCode>47 && keyCode<58) || keyCode == 46)){
e.preventDefault();
}
//匹配后只接受數字
var intParten = new RegExp("^\\d{1,"+ zs +"}\\.","i");
//匹配后只接受小數點
var intParten1 = new RegExp("^(\\d{"+ zs +"})|(0)$","i");
//匹配后結束輸入
var numberParten = new RegExp("^\\d{1,"+ zs +"}\\.\\d{"+ xs +"}$","i");
//沒有輸入的時候,或者已經輸入了數字和小數點,則不能再輸入小數點
if((text.length == 0 || intParten.test(text))&& keyCode == 46){
e.preventDefault();
}
//如果輸入了足夠多的數字或者第一位輸入了0 則只能輸入小數點
if (intParten1.test(text) && (keyCode != 46)) {
e.preventDefault();
}
//如果輸入已經符合 XX.XX 的格式,則拒絕所有輸入
if (numberParten.test(text)){
e.preventDefault();
}
});
}else{
node.on("keypress.sjsplugin",function(e) {
var keyCode = e.keyCode; //保存keyCode
//獲取當前輸入狀態
var text = $(this).val();
//只接收數字,不接收小數點
if(!(keyCode>47 && keyCode<58)){
e.preventDefault();
}
//沒有小數部分
var intParten = new RegExp("^\\d{"+ zs +"}$","i");
//如果輸入已經符合格式,則拒絕所有輸入
if (intParten.test(text)){
e.preventDefault();
}
});
}
}
});
})(jQuery);
//使用方法
$(function(){
$(".didgit_input").numberInput(2,3); //起作用
});
</script>
</head>
<body>
<input type="text" class="didgit_input">
<input type="number" class="didgit_input">
<input type="password" class="didgit_input">
</body>
</html>
后記
使用過程中發現 keypress 在手機端行為詭異,在QQ手機瀏覽器中無法使用,所以如果你想在手機端使用,需要考慮別的事件來代替 keypress