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

最新推荐文章于 2021-04-08 17:55:20 发布

wjxbj

最新推荐文章于 2021-04-08 17:55:20 发布

阅读量569

点赞数

分类专栏： JQuery 文章标签： jquery input textarea ViewUI

本文链接：https://blog.csdn.net/wjxbj/article/details/84744305

版权

JQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在项目开发中，遇到这样的问题：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>

wjxbj

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery封装自定义事件--valuechange(动态的监听input，textarea)之前值，之后值的变化...

在项目开发中，遇到这样的问题：A、B两个输入框，要求B输入框输入完的值不能大于A输入框的值，如果大于，则要求弹出提示后恢复为修改前的值。在网上查资料后如下代码解决：...var current = $(this)[0].contentEditable === 'true' ? $(this).html() : $(this).val()var p...
复制链接

扫一扫