在實際項目中,遇到 文本框 只能輸入數字的需求,說是個小問題,但要是認真起來想控制好,確實是一件很頭疼的事情。再網上也嘗試過很多方法, 很麻煩還不好用。
自己參考一些代碼,做了一些改進,加強了控制,減少了BUG,擴展的Jquery ,使用起來還很方便。
當然,這個版本還會存在一些問題,如有更好的方式 方法可分享出來。如 使用有問題,也歡迎留言。謝謝~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input id="txtFloat" type="text" />
</body>
</html>
<script>
//jquery控制只輸入數字或小數點后幾位
$(function () {
$.fn.decimalinput = function (intLen, decimallen, isNegative) {
curIntLen = intLen || 11;
decimallen = decimallen || 0;
isNegative = typeof isNegative == 'boolean' ? isNegative : false;
$(this).css("ime-mode", "disabled");
/*
KeyPress (主要用來接收字母、數字等ANSI字符)
1.不區分小鍵盤和主鍵盤的數字字符。
2.區分大小寫。
數字 1
主鍵盤區keyCode:49
小鍵盤區keyCode:49
KeyDown 、KeyUp (可以捕獲鍵盤上除了PrScrn(在鍵盤右上角)之外的所有按鍵,可以捕獲組合鍵)
1.區分小鍵盤和主鍵盤的數字字符。
2.不區分大小寫。
數字 1
主鍵盤區keyCode:49
小鍵盤區keyCode:97
*/
this.bind("keypress", function (e) {
//微軟中文輸入法 狀態下,無法監聽 keypress
var _v = this.value;
if (e.charCode === 0) return true; //非字符鍵 for firefox
var keyCode = (e.keyCode ? e.keyCode : e.which); //兼容火狐 IE
var curPos = getCurPosition(this);
var selText = getSelectedText(this);
var dotPos = _v.indexOf(".");
var curLength = _v.length;
console.log(curPos)
if (isNegative && keyCode == 45 && curPos == 0) {
curIntLen = intLen + 1;
return true;
}
curIntLen = _v.indexOf('-') > -1 ? intLen + 1 : intLen;
if (keyCode >= 48 && keyCode <= 57) {
//整數位 長度控制
if (dotPos > -1) { //存在小數點情況
if (curPos <= dotPos && dotPos >= curIntLen) {
return false;
}
} else {
if ((curLength + 1) > curIntLen && keyCode != 46) {
return false;
}
}
//小數位 長度控制
if (dotPos > 0 && curPos > dotPos) {
if (curPos > dotPos + decimallen) return false;
if (selText.length > 0 || _v.substr(dotPos + 1).length < decimallen)
return true;
else
return false;
}
return true;
}
//輸入"."
// 輸入的是小數點,並且參數可以有小數,不可在字符首位輸入小數點,不存在小數點
if (keyCode == 46 && decimallen > 0 && curPos > 0 && _v.indexOf(".") < 0) {
return true;
}
return false;
});
this.bind("keydown", function (e) {
var _v = this.value;
var dotPos = _v.indexOf(".");
var curPos = getCurPosition(this);
var selText = getSelectedText(this);
//只能全選刪除
if (e.keyCode == 8 && selText.length > 0 && selText.length != _v.length) {
return false;
}
//刪除鍵,存在小數點,光標在小數點后 ,刪除小數點的后的長度不能超過 整數長度限制,
if (e.keyCode == 8 &&
dotPos > 0 &&
curPos == (dotPos + 1) &&
(_v.length - 1) > curIntLen) {
return false;
}
})
this.bind("blur", function () {
if (this.value.lastIndexOf(".") == (this.value.length - 1)) {
this.value = this.value.substr(0, this.value.length - 1);
} else if (isNaN(this.value)) {
this.value = "";
}
if (this.value) {
var v = parseFloat(this.value).toFixed(decimallen);
if (v.indexOf('.') > curIntLen) {
v = v.substr(v.indexOf('.') - curIntLen)
}
this.value = v;
}
$(this).trigger("input");
});
this.bind("paste", function () {
// if(window.clipboardData) {
// var s = clipboardData.getData('text');
// if(!isNaN(s)) {
// value = parseFloat(s);
// return true;
// }
// }
return false;
});
this.bind("dragenter", function () { return false; });
this.bind("propertychange", function (e) {
if (isNaN(this.value))
this.value = this.value.replace(/[^0-9\.-]/g, "");
});
this.bind("input", function (e) {
if (isNaN(this.value))
this.value = this.value.replace(/[^0-9\.-]/g, "");
});
//獲取當前光標在文本框的位置
function getCurPosition(domObj) {
var curPosition = 0;
if (domObj.selectionStart || domObj.selectionStart == '0') {
curPosition = domObj.selectionStart;
} else if (document.selection) { //for IE
domObj.focus();
var currentRange = document.selection.createRange();
var workRange = currentRange.duplicate();
domObj.select();
var allRange = document.selection.createRange();
while (workRange.compareEndPoints("StartToStart", allRange) > 0) {
workRange.moveStart("character", -1);
curPosition++;
}
currentRange.select();
}
return curPosition;
}
//獲取當前文本框選中的文本
function getSelectedText(domObj) {
if (domObj.selectionStart || domObj.selectionStart == '0') {
return domObj.value.substring(domObj.selectionStart, domObj.selectionEnd);
} else if (document.selection) { //for IE
domObj.focus();
var sel = document.selection.createRange();
return sel.text;
} else return '';
}
};
$('#txtFloat').decimalinput(8, 4, true);
})
</script>
