基于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. window10系统安装Ubuntu18.04系统

    写这篇博客整理一下使用虚拟机安装Ubuntu系统,一般常用的虚拟机有VMware以及VirtualBox.鉴于方便,博主用的是virtualbox,虽然不是很美观,但简洁,且完全免费,且不需要在自己配 ...

  2. 二、pandas入门

    import numpy as np import pandas as pd Series: #创建Series方法1 s1=pd.Series([1,2,3,4]) s1 # 0 1 # 1 2 # ...

  3. C#编写高并发数据库控制

    往往大数据量,高并发时, 瓶颈都在数据库上, 好多人都说用数据库的复制,发布, 读写分离等技术, 但主从数据库之间同步时间有延迟.代码的作用在于保证在上端缓存服务失效(一般来说概率比较低)时,形成倒瓶 ...

  4. 安装vc++6.0的步骤

    我们学习计算机,就必须要先将编程的c语言学好,打好基础,学习c语言最好的方法就是多上机联系,对于联系我们需要在自己的电脑上安装vc++6.0来进行平日里的联系.1.打开电脑进行联网,打开浏览器搜索vc ...

  5. Qt+事件的接收和忽略

    事件的接收与忽略的示意图如下图: 依据前面的知识,事件是可以依据情况进行接收和忽略的,事件的传播是组件层次上面的,而不是依靠类继承机制.在一个特殊的情形下,我们必须使用accept()和ignore( ...

  6. java在线聊天项目 使用SWT快速制作登录窗口，可视化窗口Design 更换窗口默认皮肤（切换Swing自带的几种皮肤如矩形带圆角）

    SWT成功激活后 new一个JDialog 调整到Design视图 默认的视图模式是BorderLayout,无论你怎么拖拽,只能放到东西南北中的位置上 所以,我们把视图模式调整为AbsoluteLa ...

  7. WebAssembly MDN简单使用

    MDN 就是通过编译器编译完成c后生成的胶水代码 引入js 就能直接调用定义在c或者c++中的函数了 c代码如下: #include <stdio.h> #include <stdl ...

  8. LeetCode 最长连续递增序列

    给定一个未经排序的整数数组,找到最长且连续的的递增序列. 示例 1: 输入: [1,3,5,4,7] 输出: 3 解释: 最长连续递增序列是 [1,3,5], 长度为3. 尽管 [1,3,5,7] 也 ...

  9. MySQL binlog-server搭建

    MySQL binlog-server搭建 binlog在备份中起着至关重要的作用,备份binlog文件时,只能先在本地备份,然后才能传送到远程服务器上.从MySQL5.6版本后,可以利用mysqlb ...

  10. 纯 CSS 创作一个小球绕着圆环盘旋的动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 ...