当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery 监控input输入框值得变化

发表于: 2014-05-17   作者:bee1314   来源:转载   浏览次数:
摘要: 一个小需求,监控input的值变化,查阅文档,发现很不方便。 一堆事件如,onpropertychange, input, keyup, paste, change, blur,又不能同时监听这些事件,因为当输入一个值时,可能同时出发多个,这样会造成多次业务逻辑的执行。   想着能不能一种简单有用的办法,又解决跨浏览器。想到只监听keyup,和paste事件,同时过滤掉无效的不改变

一个小需求,监控input的值变化,查阅文档,发现很不方便。

一堆事件如,onpropertychange, input, keyup, paste, change, blur,又不能同时监听这些事件,因为当输入一个值时,可能同时出发多个,这样会造成多次业务逻辑的执行。

 

想着能不能一种简单有用的办法,又解决跨浏览器。想到只监听keyup,和paste事件,同时过滤掉无效的不改变值的keyup。怎么判断无效呢?很自然的一个办法就是在dom中缓存原先的值然后做对比。按照这个思路封装一个jquery的插件,致敬angularjs。

(function($) {
    $.fn.watch = function(callback) {
        return this.each(function() {
            //缓存以前的值
            $.data(this, 'originVal', $(this).val());

            //event
            $(this).on('keyup paste', function() {
                var originVal = $(this, 'originVal');
                var currentVal = $(this).val();

                if (originVal !== currentVal) {
                    $.data(this, 'originVal', $(this).val());
                    callback(currentVal);
                }
            });
        });
    }
})(jQuery);

 

调用:

$("input:text").watch(function(value) {
  console.log(value);
});

 

一些感悟,学习不能仅仅浮躁与表面,更加注重基础知识的积累。扎实的基础,很多时候事情就会变得简单。

 

最近在看clojure,非常不错的一门优雅的语言。fp确实很棒,一门语言不仅仅是语言更重要的是对思维的启发,对解决问题思路的启发。了解clojure更加适宜jquery的一些特性,比如强大的选择器。以前不明白为什么jquery要这样,比如,first,last,:nth(), not(), filter, $.map, $.grep, $.each, 这都是fp的特性啊。underscore更是强化到极限。

jquery 监控input输入框值得变化

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以
jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化 js监听输入框
随着Jquery的作用越来越大,使用的朋友也越来 越多。在Web中,由于CheckBox、Radiobutton 、DropDow
很久以前 Roger Johansson 就在他的 blog 上做了一个 用样式控制表单元素 的测试 , 告诉我们企图用
1) slideshow Really Simple Slideshow是一个用于创建各种幻灯图片的jQuery插件。这款插件可以将任
css代码 #chart { width: 700px; height: 500px; float: left; } #legend { float: left; } html代码
 在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onke
(1) 先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以
在 Web 开发中经常会碰到需要动态监听输入框值变化的情况,如果使用 onkeydown、onkeypress、onkeyu
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号