在實際項目中,遇到 文本框 只能輸入數字的需求,說是個小問題,但要是認真起來想控制好,確實是一件很頭疼的事情。再網上也嘗試過很多方法, 很麻煩還不好用。
自己參考一些代碼,做了一些改進,加強了控制,減少了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>