一个小需求,监控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更是强化到极限。
相关推荐
本篇教程将详细介绍如何使用JavaScript(原生JS)和jQuery来监听input输入框值的实时变化,并给出了相应的实例代码和解释。 首先,我们来看如何使用原生JavaScript实现对input输入框值的实时监听。在原生JavaScript...
"实时监控input框,实现输入框与下拉框联动的实例" 本文讲述了如何使用HTML、JQuery和PHP技术来实现实时监控input框,实现输入框与下拉框联动的实例。该实例可以在实际项目中应用,具有很好的参考价值。 一、HTML...
`oninput`事件在用户输入内容时触发,允许开发者实时监控并处理表单元素中的变化。`jquery-inputevent`插件便是为了解决这一问题,提供了在所有主流浏览器中统一且可靠的`oninput`事件处理。 ### 插件介绍 `jquery...
jQuery提供了`keyup`、`keydown`和`input`等事件,其中`input`事件特别适合实时监控输入框的变化。例如,`$('input').on('input', function() {...})`可以在输入框内容改变时执行回调函数。 五、实时更新下拉框 在...
该文档介绍了一款jQuery插件,用于限制input和textarea输入框中的最大文字数。插件能够根据用户输入的内容动态显示剩余可输入的字符数,并在达到最大限制时进行相应的处理。以下是对该插件的相关知识点的详细说明: ...
`jQuery IPInput` 主要适用于需要用户输入 IP 地址的场景,如网络设备配置、服务器管理界面、网络安全监控等。通过这个库,你可以提升用户输入 IP 地址的效率,减少因格式错误导致的问题,提高整个系统的可用性和...
jQuery提供了便捷的方法来操作和监控表单元素,如`$("#formId").submit()`用于监听表单提交事件,`$("#inputId").val()`用于获取或设置输入框的值。 **一、基本表单操作** 1. **选择表单元素:** 使用jQuery的选择...
`$input.on('input', function() {...})`创建了一个事件监听器,当输入框内容变化时执行回调函数。在回调函数中,我们获取当前输入的字符数,更新计数显示,并根据是否超过最大长度改变颜色。 此外,为了增加用户...
这段代码监控用户名输入框的变化,只有当用户输入了内容时,才会启用提交按钮。 ```javascript $('#username').keyup(function() { $('#submit').attr('disabled', !$('#username').val()); }); ``` 5. **...
- **TypeWatch Plugin**:监视输入框内容变化,达到特定条件时执行相应动作。 - **Text limiter for form fields**:限制用户在输入框中输入的字符数量。 - **Ajax Username Check with jQuery**:实时检查用户名...
16. Watermark Input:输入框水印。 17. jQuery Checkbox (checkboxes with images):带图片的复选框。 18. jQuery SpinButton Control:数值旋钮控制。 19. jQuery Ajax Form Builder:构建异步表单。 20. jQuery ...
5. **使用方法**:在引入jQuery库和Softkey插件后,通过简单的jQuery选择器和方法调用,就可以在指定输入框上激活虚拟键盘。例如: ```javascript $('#inputElement').softkey(); ``` 这将在id为`inputElement`...
在zepto.js中,监听DOM元素的变化是常见的需求,特别是对于输入框(input)的实时监控,以便在用户输入时立即进行处理。本文将详细介绍如何使用zepto.js实时监听输入框的方法。 ### 1. `input` 事件 在zepto.js中...
- jQuery labelcheck:当输入框获取焦点时,显示旁边的标签。 - Overlabel:让表单标签覆盖在输入框之上。 - 3 state radio buttons:支持三种状态的单选按钮。 - ShiftCheckbox jQuery Plugin:通过键盘快捷键...
这个“jQuery做的文本框字数统计/限制插件”是针对网页表单中的输入框(input)设计的一个功能组件,主要用于帮助用户实时监控并控制输入的字符数量。 首先,我们来详细了解jQuery文本框字数统计的功能。这个插件...
- **Styling an input type file**: 自定义文件输入框样式。 #### 2. 表单验证插件 - **jQuery Validation**: 最常用的表单验证插件之一,提供丰富的验证规则。 - **AutoHelp**: 自动帮助提示插件,适用于表单验证...
4. **实时更新**:autocompleter能够实时监控用户输入,当用户输入字符时立即提供相关建议。这提高了用户体验,使用户能够在输入过程中快速找到目标信息。 5. **API接口**:插件通常提供丰富的API接口,用于控制其...
7. **监听支付结果**:通过微信支付的异步通知机制,实时监控支付状态。当用户完成支付后,服务器会向商户服务器发送支付成功的通知,此时需要处理这些通知并更新订单状态。 8. **错误处理和用户体验优化**:在每个...
这不仅可以帮助用户监控输入长度,防止超过设定的限制,还可以在某些场景下,如微博、短信等,提醒用户剩余的字符数。实现这个功能可能需要监听textarea的keyup或input事件,每当用户输入或删除字符时,更新显示的...