jquery检测input变化_jquery 监控input输入框值得变化

一个小需求，监控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 监控input输入框值得变化相关推荐

jquery 检测回车事件_jquery 回车事件
简单地记下jquery实现回车事件,代码如下: 全局: $(document).keydown(function(e){ if(e.keyCode==13){ $(".login-li in ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
Jquery php 点击td变成input，修改后失去焦点发送数据
html部分 <Td><?php echo $row['bigclassid']?></Td> <td height="25" width ...
jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
jQuery Mobile中文本输入域input、textarea的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中文本输入域input.textarea的data-*选项带有 type=" ...
JavaScript监控输入框字数变化，超出限制则禁止输入
JavaScript监控输入框字数变化,超出则禁止输入不废话,给你看看效果: 1.无输入状态: 2.输入三个字符: 3.超出5个后报错: 现在粘出代码,首先是html代码: <body> ...
实时监听输入框值变化的完美方案：oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
input搜索mysql_实现input输入时智能搜索
//智能搜索 function oSearchSuggest(searchFuc) {var input = $('#in');var suggestWrap = $('#gov_search_sug ...
工具类commons-io的Tailer用法,用来监控文件内容的变化情况
一.前言:在Linux下有使用tail命令在Commons-io中也提供这种方法二.他采用的是线程方式来监控文件内容的变化 1.Tailer类(采用线程的方式进行文件的内容变法) 2.Tailer ...

jquery检测input变化_jquery 监控input输入框值得变化

jquery检测input变化_jquery 监控input输入框值得变化相关推荐

最新文章

热门文章