input限制只能輸入整數或保留小數點後2位的浮點數
阿新 • • 發佈:2018-12-24
1、test.js檔案內容如下:
/** * 使用示例: $("#price").decimalinput();//文字框只能輸入2位小數 */ $.fn.decimalinput = function () { $(this).css("ime-mode", "disabled"); this.bind("keypress", function (e) { if (e.charCode === 0) return true; //非字元鍵 for firefox var code = (e.keyCode ? e.keyCode : e.which); //相容火狐 IE if (code >= 48 && code <= 57) { var pos = getCurPosition(this); var selText = getSelectedText(this); var dotPos = this.value.indexOf("."); if (dotPos > 0 && pos > dotPos) { if (pos > dotPos + 2) return false; if (selText.length > 0 || this.value.substr(dotPos + 1).length < 2) return true; else return false; } return true; } //輸入"." if (code == 46) { var selText = getSelectedText(this); if (selText.indexOf(".") > 0) return true; //選中文字包含"." else if (/^[0-9]+\.$/.test(this.value + String.fromCharCode(code))) return true; } 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) { this.value = parseFloat(this.value);//parseFloat(this.value).toFixed(2); } $(this).trigger("input"); var value = this.value; var reg = /^(([1-9]\d*)(\.\d{1,2})?|0\.([1-9]|\d[1-9])|0)$/; if (reg.test(value)) { $(this).val(value); $("#errMsg").text("√"); } else { $("#errMsg").text("×"); } }); 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("keyup", function () { }); 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 position = 0; if (domObj.selectionStart || domObj.selectionStart == '0') { position = 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); position++; } currentRange.select(); } return position; } //獲取當前文字框選中的文字 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 ''; }
2、demo.html原始碼如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("#price").decimalinput(); }); </script> <script src="test.js"></script> </head> <body> <input type="text" id="price" maxlength="10" /><span id="errMsg"></span> </body> </html>