现在的位置: 首页 > Tools > jQuery > plugins > 正文
基于jQuery的监控表单元素变化的小插件
2012年12月12日 plugins ⁄ 共 1297字 评论数 3 ⁄ 被围观 9,704 views+
文章目录
[隐藏]

对于监控输入框或者下拉框这些表单元素,大家都有很有方法。keyup,keydown,change这些事件去监控都是一种思路,不过基本在都存在缺点。本文采用监控focus和blur事件的方式来实现:focus后开始监控,blur后停止监控,兼容性很好,不多说了,直接上代码了:

实现代码:

  1. $.fn.focuschange = function(callback) {   
  2.     return this.each(function() {   
  3.         var state = $.data(this"focusblurlistener", {   
  4.             validating: true,   
  5.             value: undefined   
  6.         });   
  7.         var box = $(this);   
  8.         box.unbind(".focusblurlistener").bind("focus.focusblurlistener"function(event) {   
  9.             state.validating = true;   
  10.             state.value = state.value || "";   
  11.             (function() {   
  12.                 if(state.validating) {   
  13.                     if(state.value != box.val()) {   
  14.                         callback.call(this, event, state.value, box.val());   
  15.                         state.value = box.val();   
  16.                     }   
  17.                     setTimeout(arguments.callee, 200);   
  18.                 }else{   
  19.                     return;   
  20.                 }   
  21.             })();   
  22.         }).bind("blur.focusblurlistener"function() {   
  23.             state.validating = false;   
  24.         });   
  25.     });   
  26. };  

使用方式:

  1. $(function(){   
  2.     $(selector).focuschange(function(e,oldValue,newValue){   
  3.         alert('旧值:' + oldValue + ";新值:" + newValue);   
  4.     });   
  5. });  

大家也看到源码的实现方式了,focus的时候出发一个不断自我递归的函数监控元素value变化;blur的时候停止监控。

目前有 3 条留言 其中:访客:1 条, 博主:1 条 引用: 1

  1. peislin : 2012年12月21日15:21:32  -49楼 @回复 回复

给我留言

留言无头像?


×