基于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. QSting, QChar, char等的转换

    1,QChar 转换char: char QChar::toLatin1();char QChar::toAscii(); 2,Char转QChar: QChar(char ch); 3,QStrin ...

  2. vue计算属性无法监听到数组内部变化

    计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data. 首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', d ...

  3. 8 Java 归并排序(MergerSort)

    图片素材与文字描述来自:尚硅谷-韩顺平数据结构与算法. 1.基本思想 归并排序是利用归并的思想实现的排序方法,该算法采用经典的分治(divide-and-conquer)策略(分治法将问题分(divi ...

  4. UEditor中多图上传的bug

    多图上传 预览:支持浏览器版本  IE8以上 在线管理:由于存在bug,显示不了 ueditor-1.1.1.jar解压后找到FileManager 1.修改com.baidu.ueditor.hun ...

  5. 从prototype beandefinition 谈 spring 的关闭流程和 prototype 的特性

    背景介绍: 服务端期望使用 面向对象编程, 和 spring 结合的话只能是通过 prototype 的 bean 定义,并通过 getBean 获取. 优雅停机探究: 代码说明: 1. 类关系 Si ...

  6. C++系统学习之六：函数

    1.函数基础 典型的函数定义包括:返回类型.函数名.由0个或多个形参组成的列表以及函数体. 2.参数传递 形参初始化的机理和变量初始化一样. 有两种方式:引用传递和值传递 2.1 传值参数 当形参是非 ...

  7. （21）zabbix创建触发器trigger

    1. 创建触发器 了解了什么触发器,接下来看下zabbix触发器怎么创建和配置,方法很简单,请大家往下读,有什么问题请留言. 创建触发器步骤: 点击Configuration(配置) → Hosts( ...

  8. datetime模块,random模块

    6.10自我总结 1.datetime模块(用于修改日期) import datetime print(datetime.datetime.now(),type(datetime.datetime.n ...

  9. [转载] Python数据类型知识点全解

    [转载] Python数据类型知识点全解 1.字符串 字符串常用功能 name = 'derek' print(name.capitalize()) #首字母大写 Derek print(name.c ...

  10. Python9-继承2-day25（大年初二）

    继承:什么是什么关系组合:什么有什么关系单继承 先抽象再继承,几个类直接的相同代码抽象出来,成为父类 子类自己没有的名字可以使用父类的方法和属性 如果子类自己有,一定先用自己的 在类中使用self的时 ...