这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
前端开发过程中,通常会用到数值录入框,比如要求输入金额,禁止录入非数值字符,也禁止粘贴非数值字符,本文主要对其实现方法进行介绍,需要的朋友一起来看下吧
前端开发过程中,通常会用到数值录入框,比如要求输入金额,禁止录入非数值字符,也禁止粘贴非数值字符,怎么实现呢?
首先通过 (function($){})(jQuery); 即时执行函数用于模块隔离,可以避免与其他功能模块、插件之间产生变量污染问题,所有私有的全局变量可以放在即时执行函数的头部。
然后在 jquery 原型上扩展 numbox 方法,直接上代码
- (function($) {
- // 数值输入框
- $.fn.numbox = function(options) {
- var type = (typeof options);
- if (type == 'object') { // 创建numbox对象
- 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); // 这里传入jQuery对象作为参数,是为了避免在模块内部直接去访问全局对象,避免过度依赖其他模块,降低耦合度,更加规范化,可控性更高,可参考其他成熟jQuery插件(easyui、bootstrap)
调用方法如下
- <body>
- <input id="test" />
- <script>
- $("#test").numbox({
- width: 150,
- height: 20
- });
- </script>
- </body>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 PHPERZ!
来源: http://www.phperz.com/article/17/0819/338101.html