新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery如何實(shí)現(xiàn)金額錄入框-創(chuàng)新互聯(lián)
這篇文章主要介紹了jQuery如何實(shí)現(xiàn)金額錄入框,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
前端開發(fā)過程中,通常會用到數(shù)值錄入框,比如要求輸入金額,禁止錄入非數(shù)值字符,也禁止粘貼非數(shù)值字符,怎么實(shí)現(xiàn)呢?
首先通過(function($){ })(jQuery); 即時(shí)執(zhí)行函數(shù)用于模塊隔離,可以避免與其他功能模塊、插件之間產(chǎn)生變量污染問題,所有私有的全局變量可以放在即時(shí)執(zhí)行函數(shù)的頭部。
然后在jquery原型上擴(kuò)展numbox方法
(function ($) { // 數(shù)值輸入框 $.fn.numbox = function (options) { var type = (typeof options); if (type == 'object') { // 創(chuàng)建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為字符串類型,代表調(diào)用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); } // 設(shè)置值 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對象作為參數(shù),是為了避免在模塊內(nèi)部直接去訪問全局對象,避免過度依賴其他模塊,降低耦合度,更加規(guī)范化,可控性更高,可參考其他成熟jQuery插件(easyui、bootstrap)
調(diào)用方法如下
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“jQuery如何實(shí)現(xiàn)金額錄入框”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
標(biāo)題名稱:jQuery如何實(shí)現(xiàn)金額錄入框-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源:http://www.dlmjj.cn/article/docpgo.html