jQuery插件封装系列（一）—— 金额录入框

最新推荐文章于 2023-01-31 09:41:35 发布
最新推荐文章于 2023-01-31 09:41:35 发布
阅读量93 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jh007/p/6169457.html
版权

基于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>

 

转载于:https://www.cnblogs.com/jh007/p/6169457.html

weixin_34186128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现金额录入框
10-20
前端开发过程中，通常会用到数值录入框，比如要求输入金额，禁止录入非数值字符，也禁止粘贴非数值字符，本文主要对其实现方法进行介绍，需要的朋友一起来看下吧
jQuery 插件封装的方法
10-21
jQuery 插件封装的方法是开发高效前端应用的关键技术之一，它允许开发者扩展jQuery的功能，创建自定义的行为和组件。在本文中，我们将深入探讨如何创建jQuery插件，以及在开发过程中需要注意的一些要点。 首先，...
JQ、JS　自动给文本框的数字加千分位(带format-number插件)
静哥亻门
08-13 8990
1、方法一为JQ，实时变化，适合我自己的需求。 JQ： $("#input_box").on("keyup",function(){ this.value =this.value.replace(/,/g, '').replace(/\d+?(?=(?:\d{3})+$)/g, function(s){ return s +',';
[js开源组件开发]数字或金额千分位格式化组件
weixin_30800807的博客
08-05 119
数字或金额千分位格式化组件 这次距离上一个组件《[js开源组件开发]table表格组件》时隔了一个月，由于最近的项目比较坑，刚挖完坑，所以来总结性提出来几个组件弥补这次的空缺，首先是金额和数字的千分位和小数点控制的组件，它的作用主要是在输入框时限制输入的内容为数字。也可以用于普通标签的数字格式化，效果如下图： demo演示地址请点击http://www.lovewebgames.c...
JavaScript：表单中金额输入的限制，实现了千分位，只输入正数，输入字符不正确时自动清除重新输入
m0_46093203的博客
06-18 514
表单中金额输入的限制，实现了千分位，只输入正数，输入字符不正确时自动清除重新输入 JavaScript部分：
jquery.Inputmask 插件用法（中文API文档）
qq_40602449的博客
03-12 1888
jquery.Inputmask 插件用法（中文API文档） 　 　 jquery.Inputmask 可以算是input文本输入限制的神器了，内部融合了多种输入限制， 如金额，电话号码，身份证号，网关等..,并且还可以自定义规则。 　 inputmask 据说最早起源于应用程序里面的插件，后面被翻译成了js，jq插件。 目前inputmask的文档大多是英文，下面将部分功能翻译...
input显示千分位，获取焦点时转为数字
cuiyiran_的博客
01-31 670
input显示千分位，获取焦点时转为数字
jquery点击图片放大插件——即插即用.zip
03-26
jQuery插件是基于jQuery核心功能的扩展，它们封装了一些特定的功能，使得开发者能轻松地集成到自己的项目中。这个点击图片放大插件就是典型的jQuery插件，它利用jQuery提供的API和事件处理机制，实现了图片的动态...
常用的jquery模板插件——jQuery Boilerplate介绍
01-19
在初次进行jquery插件开发时，我们往往无从下手，当然我们可以按照jquery官方提供的格式进行简单的插件开发，但是很...在这里主要介绍下一个在实际开发中最常用的jquery模板插件——jQuery Boilerplate jQuery Boilerpl
input金额自动转为千分位、小数点后保留两位
PRN_20_6_1的博客
09-01 1468
第一步： 需要封装一个js -代码 最后的getInputValue一定要用 export 导出，很多帖子上没有导出 const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 金额添加千分位 const comdify = function (n) { if (!n) return n; let str = n.split('.'); let re = /\d{1,3}(?=(\d{3})+$)/g; let n1 = .
jquery.maskedinput 自定义输入格式，金额，时间，秒，毫秒控件
02-24
自定义输入格式，金额，时间，秒，毫秒，控件
jQuery货币金钱格式化数字插件
03-11
accounting.js是什么，金钱和货币格式一个微小的JavaScript库，使用可选的Excel风格的列渲染（排队符号和小数）。它的重量轻，完全可本地化和具有零依赖性。 演示地址：http://www.jq22.com/jquery-info326
jQuery如何封装输入框插件
10-21
主要介绍了jQuer输入框插件封装方法，这样可以提高程序员的开发效率，非常不错，具有参考借鉴价值，需要的朋友可以参考下
基于jQuery日期选择插件
08-14
方便易用，配置简单，可自由设置日期/时间格式，开始结束时间的范围限制等
jQuery数字加减插件-数字加减框
11-18
jQuery数字加减插件-数字加减框,bootstrap风格,jqueryUI风格
input框金额实时转成千分位显示
LordForce的博客
05-11 2021
金额输入框实时格式化数值为千分位
jQuery计算选中商品总数和金额
weixin_43743378的博客
07-18 2167
jQuery实现计算选中商品的总数和总金额
Jquery 输入金额格式限制 插件
我生活的点滴
02-18 7092
<br />(function($) {<br />    $.fn.extend({<br />        money_mode: function(options) {<br />            var defaults = {<br />                decimal_length: 2,//小数点位数<br />                format: "#,###.00",//格式化类型<br />                locale: "us"<br /
JQuery 限制金额输入
zh921112的专栏
03-08 1407
$("#money").keyup(function() { var reg = $(this).val().match(/\d+\.?\d{0,2}/); var txt = ''; if (reg != null) { txt = reg[0]; } $(this).val(txt); var v = $(this)
jQuery插件之——简单日历
最新发布
05-23
jQuery是一种流行的JavaScript库，它可以简化编写JavaScript代码的过程。在这里，我将向你介绍如何使用jQuery创建一个简单的日历插件。 首先，我们需要在HTML文件中引入jQuery库和我们自己的脚本文件： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="calendar.js"></script> ``` 接下来，我们需要在HTML文件中创建一个空的`<div>`元素，用于容纳我们的日历： ```html <div id="calendar"></div> ``` 现在，我们已经准备好开始编写JavaScript代码了。在我们的脚本文件中，我们将定义一个名为`Calendar`的对象，该对象将具有以下属性和方法： ```javascript var Calendar = { // 初始化日历 init: function(selector) { // ... }, // 绘制日历 draw: function(year, month) { // ... }, // 获取指定月份的天数 getDaysInMonth: function(year, month) { // ... }, // 获取指定月份的第一天是星期几 getFirstDayOfWeek: function(year, month) { // ... } }; ``` 现在，我们来看看这个对象的实现细节。首先是初始化方法： ```javascript init: function(selector) { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; $(selector).data('year', year); $(selector).data('month', month); this.draw(year, month); } ``` 在这里，我们获取当前的年份和月份，然后将它们存储在`<div>`元素的数据属性中。然后，我们调用`draw`方法来绘制日历。 接下来是绘制方法： ```javascript draw: function(year, month) { var daysInMonth = this.getDaysInMonth(year, month); var firstDayOfWeek = this.getFirstDayOfWeek(year, month); var html = '<table>'; html += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>'; var day = 1; for (var i = 0; i < 6; i++) { html += '<tr>'; for (var j = 0; j < 7; j++) { if (i === 0 && j < firstDayOfWeek) { html += '<td></td>'; } else if (day > daysInMonth) { html += '<td></td>'; } else { html += '<td>' + day + '</td>'; day++; } } html += '</tr>'; if (day > daysInMonth) { break; } } html += '</table>'; var selector = '#calendar'; $(selector).html(html); } ``` 在这里，我们首先获取指定月份的天数和该月份的第一天是星期几。然后，我们使用一个表格来绘制日历。我们遍历6行和7列，并根据当前日期填充单元格。如果日期超出了该月份的天数，我们就停止绘制。 最后，我们将HTML代码插入到`<div>`元素中。 最后是获取指定月份的天数和第一天是星期几的方法： ```javascript getDaysInMonth: function(year, month) { return new Date(year, month, 0).getDate(); }, getFirstDayOfWeek: function(year, month) { return new Date(year, month - 1, 1).getDay(); } ``` 这些方法分别使用JavaScript的`Date`对象来计算指定月份的天数和第一天是星期几。 现在，我们已经完成了一个简单的日历插件的开发。你可以在HTML文件中使用以下代码来初始化日历： ```javascript $(document).ready(function() { Calendar.init('#calendar'); }); ``` 当然，你还可以根据自己的需要对插件进行扩展和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值