`

jQuery封装自定义事件--valuechange(动态的监听input,textarea)之前值,之后值的变化

阅读更多

        在项目开发中,遇到这样的问题:A、B两个输入框,要求B输入框输入完的值不能大于A输入框的值,如果大于,则要求弹出提示后恢复为修改前的值。

        在网上查资料后如下代码解决:

...
var current = $(this)[0].contentEditable === 'true' ? $(this).html() : $(this).val()
var previous = typeof $(this).data('previous') === 'undefined' ? $(this).defaultValue : $(this).data('previous');
if(tObj.aAmount && tObj.bAmount && tObj.aAmount.subtr(tObj.bAmount) < 0) {
	$.dialog.alert("B不能大于A!");
	...
}else {
	$(this).data('previous', current);
}
...

        参考的网上资料地址:http://www.cnblogs.com/tugenhua0707/p/3733395.html

        js监听输入框值的即时变化 网上有很多关于 onpropertychange、oninput的讲解,但是他们都不是我想要的,我想要的是动态的监听input,textarea等之前值和之后改变的值,比如像KISSY中的valuechange事件一样,当我在输入框里面开始输入1的时候,那么之前值是undefined,现在的值是1,当我接着输入2时候,那么之前的值是1,现在的值是2.等,我想要获取这种效果,因为如果有这种方法的话,那么我以后做input,textarea等操作时候,是非常方便的,比如我想监听textarea值的变化,如果变化了我该做什么操作,如果值没有变化,我又该做什么事情,是非常方便的使用。我们可以看看效果如下:

        其实就是用了下Jquery自定义事件操作,我们可以看看jquery源码中的一部分代码如下:


        setUP方法是注册事件,teardown是删除事件方法。不多说,直接贴代码如下:

<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $.event.special.valuechange = {
	
	  teardown: function (namespaces) {
	    $(this).unbind('.valuechange');
	  },
	
	  handler: function (e) {
	    $.event.special.valuechange.triggerChanged($(this));
	  },
	
	  add: function (obj) {
	    $(this).on('keyup.valuechange cut.valuechange paste.valuechange input.valuechange', obj.selector, $.event.special.valuechange.handler)
	  },
	
	  triggerChanged: function (element) {
	    var current = element[0].contentEditable === 'true' ? element.html() : element.val()
	      , previous = typeof element.data('previous') === 'undefined' ? element[0].defaultValue : element.data('previous')
	    if (current !== previous) {
	      element.trigger('valuechange', [element.data('previous')])
	      element.data('previous', current)
	    }
	  }
	};
	
	$(function () {
	      $('#text').on('valuechange', function (e, previous) {
	          $('#output').append('previous: ' +  previous +  '  --  current: ' + $(this).val() + '<br />')
	        })
	 });
});
</script>
</head>
<body>
<input id="text" type="text" /> 
<div id="output"></div>
</body>
</html>
  • 大小: 4.5 KB
  • 大小: 55.3 KB
分享到:
评论

相关推荐

    jquery监听div内容的变化具体实现思路

    change事件是jQuery中用于监听表单元素值变化的事件,它仅适用于文本域(textfield)、文本区(textarea)和选择框(select)等表单元素。当这些元素的值发生变化时,就会触发change事件。对于div来说,由于它不是...

    jsf自定义组件.pdf

    - **事件(Events)**:组件标签还可以定义事件,如`action`事件和`valueChange`事件。这些事件允许组件与其他组件或后端代码交互。 **2.3 使用自定义组件** 使用自定义组件通常需要经过以下几个步骤: - **导...

    ember-tag-search-input:曼·阿顿

    灰烬标签搜索输入演示版基本用法{{ tag-search-input placeholder = ' Search for objects ' modifierConfig = config inputValue = model.queryString valueChange = ( action ' searchValueChange ' ) ...

    jsf的初步使用(包括jsf框架的引入、用户登录、自定义表单验证、valueChangeEvent值变更事件处理做的级联下拉框,内有jsf的jar包)

    在JSF中,`valueChangeEvent`用于监听组件值的变化。假设我们有两个下拉框,一个是国家,一个是城市,当选择国家后,城市下拉框应更新为对应国家的城市列表。在JSF页面上: ```html &lt;f:ajax event="valueChange" ...

    Excel-VBA宏编程实例源代码-让微调按钮与文字框连动.zip

    - **事件**:微调按钮有多个内置事件,例如ValueChange事件,当用户改变其值时触发。 3. **文字框(TextBox)的使用**: - **创建**:同样通过开发工具选项卡添加文字框,用于显示或输入数据。 - **属性**:文字...

    unity血条及文字显示代码

    例如,我们可以为Slider添加一个OnValueChanged事件监听器,每当Slider的值改变时,自动更新Text的文本。 总结来说,Unity中的血条和文字显示是通过结合UI组件、C#脚本和事件系统来实现的。`SetTextByText`和`...

    JSF控件详细说明

    例如,`&lt;h:inputText&gt;`的`value`属性用于指定显示或绑定的值,`required`属性用于设置是否为必填,`validator`属性可以指定自定义验证函数。 ### JSF事件处理 JSF控件支持多种事件,如`action`事件(按钮点击时...

    移动端时间选择

    - 当用户选择时间时,需要监听相应的事件(如`valueChange`),并在事件触发时更新界面和应用状态。 9. **性能优化** - 如果应用需要处理大量时间选择,要考虑性能优化,比如避免不必要的渲染和计算,使用虚拟...

    jsf实战附录,JSF标签,组件详细介绍

    2. 组件事件:JSF组件可以触发和监听各种事件,如`action`事件(按钮点击)、`valueChange`事件(输入字段值改变)。通过监听器方法,开发者可以对这些事件作出响应。 3. 组件行为:组件可以通过JavaScript或AJAX...

    C#Winform 自定义进度条

    此进度条 用户可以自定义设置前景和背景的样式(纯色,渐变,图案,图片),可以设置颜色,透明度(图片无法设置透明度)。进度有Value和MaxValue控制。具有事件ValueChange和Finish。

    Vue2.x通用编辑组件的封装及应用详解

    3. **事件监听**:子组件通过`$emit`触发事件,父组件通过监听事件来获取子组件的状态变化,如`@valueChange`。 4. **状态管理**:使用`data`来管理组件内部的状态,如`editStatus`和`newValue`,并通过计算属性或...

    iOS开发中Quartz2D控制圆形缩放和实现刷帧效果

    然后,在视图控制器中,监听滑动控件的值改变事件,根据滑动控件的值来改变圆的半径,从而实现圆的动态缩放。例如,可以在`valueChanged:`方法中计算新的半径并调用`setNeedsDisplay`来刷新视图。 代码示例可能如下...

    C# 自制精美音量控制Slider

    接下来,我们需要处理ValueChange事件,这通常是音量控制的核心部分。当用户移动Slider时,该事件会被触发,我们可以通过改变音频播放器的音量来响应: ```csharp private void VolumeSlider_ValueChanged(object ...

    PB 11.5 CheckBox三种状态的实例

    如果CheckBox是三态的,即包括“不确定”状态,那么ValueChange事件会在状态变化时被触发,即使状态是从已选中到未选中,反之亦然。 4. 示例代码: 创建一个简单的PowerBuilder应用,包含一个CheckBox控件,可以在...

    用selectOneMenu标签开发级联选择

    这通常通过监听第一个菜单的`valueChange`事件并在后台动态更新第二个菜单的选项来实现。 1. **后台数据准备**: - 创建两个或多个列表,分别代表每个级别的选项。 - 这些列表可以由数据库查询动态生成,或者在...

    Angular6 写一个简单的Select组件示例

    在Angular6中,开发一个自定义的Select组件可以极大地提高代码复用性和可维护性。以下是对这个简单Select组件的详细解析: 1. **组件结构**: 组件的目录结构如下所示: - `/src/app/select`: 这是Select组件的...

    Sun_JSF2AndAjax.pdf

    - `event`属性定义了触发Ajax请求的事件,默认情况下,`valueChange`和`action`事件会自动触发Ajax请求。 - **目标组件选择**:在处理Ajax请求时,可以使用客户端ID或组件ID来指定目标组件,这可以通过`prependId=...

    JSF 组件开发.rar

    9. **事件处理**:JSF组件支持各种事件,如preRenderView、action和valueChange等。通过监听器方法,我们可以响应这些事件并执行相应操作。 ### 四、组件生命周期 10. **组件生命周期**:JSF组件经历了初始化、...

Global site tag (gtag.js) - Google Analytics