在实际项目中,遇到 文本框 只能输入数字的需求,说是个小问题,但要是认真起来想控制好,确实是一件很头疼的事情。再网上也尝试过很多方法, 很麻烦还不好用。
自己参考一些代码,做了一些改进,加强了控制,减少了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>
