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

(function ($) {

    // 数值输入框

    $.fn.numbox = function (options) {

        var type = (typeof options);

        if (type == '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为字符串类型，代表调用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);

调用方法如下

<body>

    <input id="test" />

    <script>

        $("#test").numbox({

            width: 150,

            height: 20

        });

        // 调用setValue方法设置值
        $("#test").numbox('setValue',100);
</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. django 2.0 + pycharm2017 出现的问题

    在创建完成app之后,在models文件里创建两个类:BlogType , Blog, 创建超级用户,注册admin,在登陆admin之后发现,发现 BlogType , Blog,并没有导入到adm ...

  2. JavaScript中数据类型和typeof返回的数据类型

    除了上图,要注意三点:1.symbol是ES6中新增的数据类型 2.typeof(null)结果是Object 3.typeof(Object)和typeof(Array)的结果是function,因 ...

  3. oracle count 百万级 分页查询记要总数、总条数优化

    oracle count 百万级 分页查询记录总数.总条数优化 oracle count 百万级 查询记录总数.总条数优化 最近做一个项目时,做分页时,发现分页查询速度很慢,分页我做的是两次查询,一次 ...

  4. 二. python函数与模块

    第四章.内置函数与装饰器详解 1.内置函数补充1 注:红色圆圈:必会:  紫红色方框:熟练:   绿色:了解 callable() 判断函数是否可以被调用执行 def f1(): pass f1() ...

  5. 【树论 倍增】51nod1709 复杂度分析

    倍增与位运算有很多共性:这题做法有一点像「线段树上二分」和「线段树套二分」的关系. 给出一棵n个点的树(以1号点为根),定义dep[i]为点i到根路径上点的个数.众所周知,树上最近公共祖先问题可以用倍 ...

  6. 【dp】数字游戏&寒假祭

    区间DP 题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前有一圈整数(一共n个),你要按 ...

  7. 【Linux】VirtualBox虚拟网络配置

    Host OS : Windows 10 Guest OS : CentOS 6.8 VirtualBox:5.1.18 网络连接方式: NAT 1.CentOS中使用DHCP [root@gouka ...

  8. (原)剑指offer之旋转数组

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋 ...

  9. Matplotlib基础图形之散点图

    Matplotlib基础图形之散点图 散点图特点: 1.散点图显示两组数据的值,每个点的坐标位置由变量的值决定 2.由一组不连续的点组成,用于观察两种变量的相关性(正相关,负相关,不相关) 3.例如: ...

  10. MySQL 2003 [ERROR] /usr/sbin/mysqld: Incorrect key file for table './keyword_search/keyword.MYI'; try to repair it

    今天对一个有四百多万数据的表增加一个功能时,当做数据插入时,显示没有插入,到Linux的log下面查看了发现下面这条错误信息 在stacOver上面找到这句: 存储引擎(MyISAM)支持修复表.你应 ...