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