基于jQuery原型封装数值录入框，禁止录入、粘贴非数值字符

  1. (function ($) {
  2.     // 数值输入框
  3.     $.fn.numbox = function (options) {
  4.         var type = (typeof options);
  5.         if (type == 'object') {
  6.             if (options.width) this.width(options.width);
  7.             if (options.height) this.height(options.height);
  8.             this.bind("input propertychange", function (obj) {
  9.                 numbox_propertychange(obj.target);
  10.             });
  11.  
  12.             this.bind("change", function (obj) {
  13.                 var onChange = options.onChange;
  14.                 if (!onChange) return;
  15.                 var numValue = Number(obj.target.value);
  16.                 onChange(numValue);
  17.             });
  18.             this.bind("hide", function (obj) {
  19.                 var onHide = options.onHide;
  20.                 if (!onHide) return;
  21.                 var numValue = Number(obj.target.value);
  22.                 onHide(numValue);
  23.             });
  24.             return this;
  25.         }
  26.         else if (type == 'string') {
    　　　　　　　// type为字符串类型，代表调用numbox对象中定义的方法
  27.             var method = eval(options);
  28.             if (method) return method(this, arguments);
  29.         }
  30.     }
  31.     // 属性值变化事件
  32.     function numbox_propertychange(numbox) {
  33.         if (numbox.value == '-' || numbox.value == numbox.oldvalue) return;
  34.         var numvalue = Number(numbox.value);
  35.         if (isNaN(numvalue)) {
  36.             numbox.value = numbox.oldvalue;
  37.         }
  38.         else {
  39.             numbox.oldvalue = numbox.value;
  40.         }
  41.     }
  42.     // 获取值
  43.     function getValue(numbox) {
  44.         var value = numbox.val();
  45.         return Number(value);
  46.     }
  47.     // 设置值
  48.     function setValue(numbox, params) {
  49.         if (params[1] == undefined) return;
  50.         var numvalue = Number(params[1]);
  51.         if (!isNaN(numvalue)) {
  52.             for (var i = 0; i < numbox.length; i++) {
  53.                 numbox[i].focus();
  54.                 numbox[i].value = numvalue;
  55.                 numbox[i].oldvalue = numvalue;
  56.             }
  57.         }
  58.     }
  59. })(jQuery);

调用方法如下

  1. <body>
  2.     <input id="test" />
  3.     <script>
  4.         $("#test").numbox({
  5.             width: 150,
  6.             height: 20
  7.         });
  8.  
  9.         // 调用setValue方法设置值
  1.         $("#test").numbox('setValue',100);
  1. </script> 
    </body>

jQuery插件封装系列（一）—— 金额录入框的更多相关文章

  1. 我的第一个jquery插件：下拉多选框

    <!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...

  2. jquery插件封装

    HTML <!DOCTYPE html> <html> <head> <title></title> <style> .page ...

  3. 最简单的原生js和jquery插件封装

    最近在开发过程中用别人的插件有问题,所以研究了一下,怎么封装自己的插件. 如果是制作jquery插件的话.就将下面的extend方法换成  $.extend 方法,其他都一样. 总结一下实现原理: 将 ...

  4. 【jQuery】jquery插件封装

    扩展jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn ...

  5. jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件

    完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...

  6. jquery插件封装成seajs模块

    jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery ...

  7. jquery插件封装思路整理

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. (jQuery 插件)封装容器的表单为json对象

    下面代码可以把一个页面容器中的表单元素封装成一个json对象. (function($){ $.fn.serializeObject=function(){ var inputs=$(this).fi ...

  9. jQuery 插件封装的方法

    方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.m​​yPlugin = function () { //你自己的插件代码 }; })(jQuer ...

随机推荐

  1. PyTorch在NLP任务中使用预训练词向量

    在使用pytorch或tensorflow等神经网络框架进行nlp任务的处理时,可以通过对应的Embedding层做词向量的处理,更多的时候,使用预训练好的词向量会带来更优的性能.下面分别介绍使用ge ...

  2. python：lambda、filter、map、reduce

    lambda 为关键字.filter,map,reduce为内置函数. lambda:实现python中单行最小函数. g = lambda x: x * 2 #相当于 def g(x): retur ...

  3. Java异常 Exception类及其子类

    C语言时用if...else...来控制异常,Java语言所有的异常都可以用一个类来表示,不同类型的异常对应不同的子类异常,每个异常都对应一个异常类的对象. Java异常处理通过5个关键字try.ca ...

  4. ios开发--常用的高效开发的宏

    本次在做项目的时候使用了下面的一些宏定义 以及 建立宏定义的一些规则.虽然只用了其中的一点点,但是还是极大的提高了开发效率.. 将这些宏放到一个头文件里然后再放到工程中,在需要使用这些宏定义的地方体检 ...

  5. 数据库事务ACID和事务的隔离级别

    借鉴:https://blog.csdn.net/zh521zh/article/details/69400053和https://blog.csdn.net/May_3/article/detail ...

  6. CF895E Eyes Closed (期望)

    题目链接 利用期望的线性性质: \(E(sum) = E(x_l) + E(x_{l+1})+ E(x_{l+2}) +.. E(x_r)\) 然后就考虑对于交换时两个区间元素的改动. 假设这两个区间 ...

  7. 【Java基础】java中的反射机制与动态代理

    一.java中的反射机制 java反射的官方定义:在运行状态下,可以获取任意一个类的所有属性和方法,并且可通过某类任意一对象实例调用该类的所有方法.这种动态获取类的信息及动态调用类中方法的功能称为ja ...

  8. CSS3的border-image

    border-image:none|image-url|number|percentage|stretch,repeat,round 参数: none:默认,无背景图片 url:地址,可以为绝对,也可 ...

  9. Web框架之Django_10 重要组件（Auth模块）

    一.auth模块介绍 Auth模块是Django自带的用户认证模块: 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等 ...

  10. nw335 debian sid x86-64 -- 5 使用xp的驱动

    nw335 debian sid x86-64 -- 5 使用xp的驱动