這篇文章主要介紹“jQuery怎么實現金額錄入框”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“jQuery怎么實現金額錄入框”文章能幫助大家解決問題。
我們提供的服務有:成都網站制作、網站設計、微信公眾號開發、網站優化、網站認證、彰武ssl等。為上1000家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務,是有科學管理、有技術的彰武網站制作公司
首先通過(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>
關于“jQuery怎么實現金額錄入框”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注創新互聯行業資訊頻道,小編每天都會為大家更新不同的知識點。
文章題目:jQuery怎么實現金額錄入框
網址分享:http://vcdvsql.cn/article28/phojjp.html
成都網站建設公司_創新互聯,為您提供網頁設計公司、ChatGPT、小程序開發、網站維護、域名注冊、品牌網站制作
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯