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

news/2024/7/10 23:26:46 标签: jquery, 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的讲解,但是他们都不是我想要的,我想要的是动态的监听inputtextarea等之前值和之后改变的值,比如像KISSY中的valuechange事件一样,当我在输入框里面开始输入1的时候,那么之前值是undefined,现在的值是1,当我接着输入2时候,那么之前的值是1,现在的值是2.等,我想要获取这种效果,因为如果有这种方法的话,那么我以后做inputtextarea等操作时候,是非常方便的,比如我想监听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>

http://www.niftyadmin.cn/n/1317597.html

相关文章

39-thinkPhp路由的分组

1.路由闭包方式分组 //路由分组 //闭包方式运用分组 Route::group(rg,function (){Route::get(:id,read);Route::get(:name,name); })->prefix(routegroup/) //简化同一个控制器名->ext(html) //指定扩展名html->pattern([id>\d,name>\w]);测试用的控制器 &…

Linux Rootkit Learning

目录 1. 学习Rootkit需要了解的基础知识 2. 挂钩(HOOKING) 3. 直接内核对象操作 4. LSM框架(Linux Security Module)于LKM安全 5. rootkit检测技术及工具 1. 学习Rootkit需要了解的基础知识 0x1: 什么是rootkit rootkit是允许某人控制操作系统的特定方面而不暴露他或她的踪迹的…

2019-09-17 合并两个有序链表

将两个有序链表合并为一个新的有序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例&#xff1a; 输入&#xff1a;1->2->4, 1->3->4 输出&#xff1a;1->1->2->3->4->4由于两个链表本身有序&#xff0c;则依次比较两个链表的…

39_THINKPHP注释路由注解路由

先在app.php里面设置 // 使用注解路由 ‘route_annotation’ > true, 测试 <?phpnamespace app\controller;use think\Controller;class HelloWorld extends Controller {public function initialize(){parent::initialize(); // TODO: Change the autogenerated stub…

python小程序

九九乘法口诀输出 for i in range(1,10):for j in range(1,10):print({} X {} {}.format(i,j,i*j))

POJ 1329

模板题&#xff0c;注意一下输出就可以。 #include <iostream> #include <cstdio> #include <cmath> #include <algorithm>using namespace std; struct point {double x,y; }; struct triangle{point t[3]; }t; struct Circle{double x,y;double r; }…

VScode配置Linux内核环境

1.准备工作 需要的VSCode插件&#xff1a;clangd、remote-ssh(本机阅读和开发代码不需要&#xff09;。 需要的脚本&#xff1a;kernel目录下的scripts/clang-tools/gen_compile_commands.py 。 2.步骤 2.1.在VSCode上安装remote-ssh 如果是远程阅读和开发代码的话&#x…

jQuery禁止并灰显下拉选项

jQuery禁止并灰显下拉选项&#xff0c;是通过给option加disabled"true"属性控制的&#xff0c;如下示例所示&#xff1a; <html> <head> <script type"text/javascript" src"jquery-1.8.3.js"></script> <script typ…