一个小需求,监控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输入框动画提示效果代码
在本篇文章里小编给大家整理的是一篇关于jQuery/JS监听input输入框值变化实例内容,需要的朋友们学习下。
js与jquery获取input输入框中的值实例讲解.docx
如何实现input输入框实时输入触发事件,下面有个不不错的示例使用jquery实现的,感兴趣的朋友可以参考下
主要介绍了jQuery实现动态添加、删除按钮及input输入框的方法,涉及jQuery事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
jquery输入框提示插件input输入框文字下拉提示添加标签代码
点击input输入框弹出选择层(基于jquery) 网页特效,网页模板,导航菜单,焦点幻灯片,JS代码
js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取
js与jquery实时监听输入框值的oninput与onpropertychange方法.docx
jQuery掩码文本输入框 jQuery掩码文本输入框网页特效.zip
jQuery无刷新实时修改输入框中的文本并保存,可以把input数据在不经过数据读取的情况下及时修改,增强用户体验,确认修改后再上传数据库。 这种功能估计大家以前都见到过的,特别是在一些用户体验比较好的CMS系统...
如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value 先准备一段 HTML <input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME"> 一、jquery获取input文本框...
input输入框获取js点击文字内容是一款js输入框特效,无jquery,只需点击div,input输入框会自动获取输入的内容。
效果图 代码部分 代码如下: // JavaScript Document (function($){ $.fn.extend({ “changeTips”:function(value){ value = $.extend({ divTip:”” },value) var $this = $(this); var indexLi = 0;...
如何用javascript获取input输入框中的值,js/jq通过name、id、class获取input输入框中的value 先准备一段 HTML <input type="text" name"username" id="user" placeholder="用户名" class="uusr"> 一、...
jQuery实现输入框回车添加标签代码,可以在输入框输入关键词后回车键入标签,也可以选择预设的标签,选择后的标签会显示在输入框的上方,也可以删除,支持过滤重复标签。