前端開發過程中，通常會用到數值錄入框，比如要求輸入金額，禁止錄入非數值字符，也禁止粘貼非數值字符，怎么實現呢？
首先通過(function($){ })(jQuery); 即時執行函數用于模塊隔離，可以避免與其他功能模塊、插件之間產生變量污染問題，所有私有的全局變量可以放在即時執行函數的頭部。
然后在jquery原型上擴展numbox方法，直接上代碼
(function ($) { // 數值輸入框 $.fn.numbox = function (options) { var type = (typeof options); if (type == 'object') { // 創建numbox對象 if (options.width) this.width(options.width); if (options.height) this.height(options.height); this.bind("input propertychange", function (obj) { numbox_propertychange(obj.target); }); this.bind("change", function (obj) { var onChange = options.onChange; if (!onChange) return; var numValue = Number(obj.target.value); onChange(numValue); }); this.bind("hide", function (obj) { var onHide = options.onHide; if (!onHide) return; var numValue = Number(obj.target.value); onHide(numValue); }); return this; } else if (type == 'string') { // type為字符串類型，代表調用numbox對象中的方法 var method = eval(options); if (method) return method(this, arguments); } } // 屬性值變化事件 function numbox_propertychange(numbox) { if (numbox.value == '-' || numbox.value == numbox.oldvalue) return; var numvalue = Number(numbox.value); if (isNaN(numvalue)) { numbox.value = numbox.oldvalue; } else { numbox.oldvalue = numbox.value; } } // 獲取值 function getValue(numbox) { var value = numbox.val(); return Number(value); } // 設置值 function setValue(numbox, params) { if (params[1] == undefined) return; var numvalue = Number(params[1]); if (!isNaN(numvalue)) { for (var i = 0; i < numbox.length; i++) { numbox[i].focus(); numbox[i].value = numvalue; numbox[i].oldvalue = numvalue; } } }})(jQuery); // 這里傳入jQuery對象作為參數，是為了避免在模塊內部直接去訪問全局對象，避免過度依賴其他模塊，降低耦合度，更加規范化，可控性更高，可參考其他成熟jQuery插件（easyui、bootstrap）調用方法如下
<body> <input id="test" /> <script> $("#test").numbox({ width: 150, height: 20 }); </script></body>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！
新聞熱點
疑難解答
圖片精選
