jQuery实现金额录入框-6ren

jQuery实现金额录入框

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery实现金额录入框由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

前端开发过程中，通常会用到数值录入框，比如要求输入金额，禁止录入非数值字符，也禁止粘贴非数值字符，怎么实现呢?

首先通过(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>