`
bee1314
  • 浏览: 165943 次
  • 性别: Icon_minigender_1
  • 来自: 安徽
社区版块
存档分类
最新评论

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更是强化到极限。

分享到:
评论
2 楼 yy8093 2015-07-26  
yy8093 写道
试了下,无法触发到事件,不管是复制还是手动输入,没任何反映



说错了,直接复制能用,但是如果用单个的输入框,似乎不行,例如调用的时候,给$("#name")绑定,就没效果了
1 楼 yy8093 2015-07-26  
试了下,无法触发到事件,不管是复制还是手动输入,没任何反映

相关推荐

    js监听input输入框值的实时变化实例

    本篇教程将详细介绍如何使用JavaScript(原生JS)和jQuery来监听input输入框值的实时变化,并给出了相应的实例代码和解释。 首先,我们来看如何使用原生JavaScript实现对input输入框值的实时监听。在原生JavaScript...

    实时监控input框,实现输入框与下拉框联动的实例

    "实时监控input框,实现输入框与下拉框联动的实例" 本文讲述了如何使用HTML、JQuery和PHP技术来实现实时监控input框,实现输入框与下拉框联动的实例。该实例可以在实际项目中应用,具有很好的参考价值。 一、HTML...

    jquery-inputevent:jQuery的跨浏览器oninput事件

    `oninput`事件在用户输入内容时触发,允许开发者实时监控并处理表单元素中的变化。`jquery-inputevent`插件便是为了解决这一问题,提供了在所有主流浏览器中统一且可靠的`oninput`事件处理。 ### 插件介绍 `jquery...

    jQuery支持模糊查询下拉框菜单选择代码

    jQuery提供了`keyup`、`keydown`和`input`等事件,其中`input`事件特别适合实时监控输入框的变化。例如,`$('input').on('input', function() {...})`可以在输入框内容改变时执行回调函数。 五、实时更新下拉框 在...

    input 和 textarea 输入框最大文字限制的jquery插件

    该文档介绍了一款jQuery插件,用于限制input和textarea输入框中的最大文字数。插件能够根据用户输入的内容动态显示剩余可输入的字符数,并在达到最大限制时进行相应的处理。以下是对该插件的相关知识点的详细说明: ...

    jQueryIPInput:此库将文本类型输入框转换为 ip 输入框,这将自动完成八位字节并强制执行 ip 格式

    `jQuery IPInput` 主要适用于需要用户输入 IP 地址的场景,如网络设备配置、服务器管理界面、网络安全监控等。通过这个库,你可以提升用户输入 IP 地址的效率,减少因格式错误导致的问题,提高整个系统的可用性和...

    jquery通信

    jQuery提供了便捷的方法来操作和监控表单元素,如`$("#formId").submit()`用于监听表单提交事件,`$("#inputId").val()`用于获取或设置输入框的值。 **一、基本表单操作** 1. **选择表单元素:** 使用jQuery的选择...

    jQuery实现的表单输入文字计数显示特效代码.zip

    `$input.on('input', function() {...})`创建了一个事件监听器,当输入框内容变化时执行回调函数。在回调函数中,我们获取当前输入的字符数,更新计数显示,并根据是否超过最大长度改变颜色。 此外,为了增加用户...

    几个实用的 jQuery 表单操作代码片段

    这段代码监控用户名输入框的变化,只有当用户输入了内容时,才会启用提交按钮。 ```javascript $('#username').keyup(function() { $('#submit').attr('disabled', !$('#username').val()); }); ``` 5. **...

    jquery插件表

    - **TypeWatch Plugin**:监视输入框内容变化,达到特定条件时执行相应动作。 - **Text limiter for form fields**:限制用户在输入框中输入的字符数量。 - **Ajax Username Check with jQuery**:实时检查用户名...

    240多个jQuery插件

    16. Watermark Input:输入框水印。 17. jQuery Checkbox (checkboxes with images):带图片的复选框。 18. jQuery SpinButton Control:数值旋钮控制。 19. jQuery Ajax Form Builder:构建异步表单。 20. jQuery ...

    softkey是一款轻量级跨浏览器的jQuery虚拟键盘插件

    5. **使用方法**:在引入jQuery库和Softkey插件后,通过简单的jQuery选择器和方法调用,就可以在指定输入框上激活虚拟键盘。例如: ```javascript $('#inputElement').softkey(); ``` 这将在id为`inputElement`...

    zepto.js 实时监听输入框的方法

    在zepto.js中,监听DOM元素的变化是常见的需求,特别是对于输入框(input)的实时监控,以便在用户输入时立即进行处理。本文将详细介绍如何使用zepto.js实时监听输入框的方法。 ### 1. `input` 事件 在zepto.js中...

    jQuery插件教程(搜罗了全部插件).docx

    - jQuery labelcheck:当输入框获取焦点时,显示旁边的标签。 - Overlabel:让表单标签覆盖在输入框之上。 - 3 state radio buttons:支持三种状态的单选按钮。 - ShiftCheckbox jQuery Plugin:通过键盘快捷键...

    jQuery做的文本框字数统计/限制插件

    这个“jQuery做的文本框字数统计/限制插件”是针对网页表单中的输入框(input)设计的一个功能组件,主要用于帮助用户实时监控并控制输入的字符数量。 首先,我们来详细了解jQuery文本框字数统计的功能。这个插件...

    240多个jQuery插件.doc

    - **Styling an input type file**: 自定义文件输入框样式。 #### 2. 表单验证插件 - **jQuery Validation**: 最常用的表单验证插件之一,提供丰富的验证规则。 - **AutoHelp**: 自动帮助提示插件,适用于表单验证...

    jQuery自动完成插件autocompleter

    4. **实时更新**:autocompleter能够实时监控用户输入,当用户输入字符时立即提供相关建议。这提高了用户体验,使用户能够在输入过程中快速找到目标信息。 5. **API接口**:插件通常提供丰富的API接口,用于控制其...

    jQuery微信在线支付代码.zip

    7. **监听支付结果**:通过微信支付的异步通知机制,实时监控支付状态。当用户完成支付后,服务器会向商户服务器发送支付成功的通知,此时需要处理这些通知并更新订单状态。 8. **错误处理和用户体验优化**:在每个...

    jquery 插件之 floattextbox 修改版

    这不仅可以帮助用户监控输入长度,防止超过设定的限制,还可以在某些场景下,如微博、短信等,提醒用户剩余的字符数。实现这个功能可能需要监听textarea的keyup或input事件,每当用户输入或删除字符时,更新显示的...

Global site tag (gtag.js) - Google Analytics