现在的位置: 首页 > Tools > jQuery > plugins > 正文
基于jQuery的监控表单元素变化的小插件
2012年12月12日 plugins ⁄ 共 1297字 评论数 3 ⁄ 被围观 8,142 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楼 @回复 回复

    小雪,你好!我有两个疑问:
    1、
    var state = $.data(this, “focusblurlistener”, {
    validating: true,
    value: undefined
    });
    这里validating已经设置为true了,后面为什么还要设置?
    2、state.validating = false;在blur时设置为false,下次循环时又设置为true,岂不是覆盖了?


    • 管理员
      世纪之光 : 2012年12月21日16:07:09  地下1层 @回复 回复

      一、这个地方只是初始化“校验开关”,后面你得动态维护,焦点在输入框类要激活“校验开关”,离开输入框要关闭“校验开关”
      二、blur的时候validating是设置为false了,但你说的下次循环根本不存在。匿名函数自身的递归调用也会在validating为false的时候终止,因为为false就直接return了;如果输入框再次获得焦点,那么validating就应该再次被激活为true

给我留言

留言无头像?


×