jQuery插件封装系列(一)—— 金额录入框
2016-12-13 13:05
363 查看
基于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插件系列之 jquery.validate
- Jquery系列文章之开发插件(11章)
- 推荐40个非常优秀的 jQuery 插件和教程【系列三】
- JQuery插件第十三个 : 图片批量滚动的封装
- 40款非常棒的 jQuery 插件和制作教程【系列四】
- 菜鸟也封装之JQuery,Selected插件.
- 40款非常有用的 jQuery 插件推荐(系列一)
- 40款非常棒的 jQuery 插件和制作教程(系列二)
- 40款非常棒的 jQuery 插件和制作教程(系列二)
- 40款非常有用的 jQuery 插件推荐(系列一)
- jQuery Google Charts----一个封装google chart api的jquery插件
- 封装jQuery表格插件jqGrid,控件化jqGrid(二):显示
- JQuery 封装脚本系列之单选框(Radio)
- 40款非常棒的jQuery 插件和制作教程(系列二)
- 40款非常棒的 jQuery 插件和制作教程(系列一)
- jQuery插件系列,对web开发很有用哦
- JQuery 封装脚本系列之下拉列表框(Select)
- Jquery 输入金额格式限制 插件
- 推荐40个非常优秀的jQuery插件和教程【系列三】
- 40款非常有用的 jQuery 插件推荐(系列一)