Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve the amount entry frame in jQuery". The editor shows you the operation process through the actual case. The operation method is simple and fast, and it is practical. I hope that this article "how to achieve the amount entry frame in jQuery" can help you solve the problem.

First of all, through (function ($) {}) (jQuery); the instant execution function is used for module isolation, which can avoid variable contamination with other functional modules and plug-ins, and all private global variables can be placed in the header of the real-time execution function.

Then extend the numbox method on the jquery prototype

(function ($) {/ / numeric input box $.fn.numbox = function (options) {var type = (typeof options); if (type = = 'object') {/ / create numbox object 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 is a string type, which means calling the method var method = eval (options) in the numbox object; if (method) return method (this, arguments);}} / / attribute value change event 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;}} / / get the value function getValue (numbox) {var value = numbox.val (); return Number (value);} / / set the 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) JQuery +) {numbox [I] .focus (); Numbox [I] .value = numvalue; Numbox [I] .oldvalue = numvalue;}) (jQuery); / / the jQuery object is introduced here as a parameter to avoid direct access to global objects within the module, avoid over-reliance on other modules, reduce coupling, become more standardized and more controllable. Refer to other mature jQuery plug-ins (easyui, bootstrap).

The calling method is as follows

$("# test"). Numbox ({width: 150, height: 20}); this is the end of the introduction of "how to realize the amount entry box in jQuery". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.