实时监听的几种方法

最新推荐文章于 2024-11-01 18:11:41 发布

转载最新推荐文章于 2024-11-01 18:11:41 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3680343/blog/1604004

文章标签：

#python #c/c++ #javascript #ViewUI

2019独角兽企业重金招聘Python工程师标准>>>

1.keyup

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。

当keyup+回车事件(event.keyCode==13)结合使用时，监听不到搜狗输入法中文情况下的输入

2.DOMSubtreeModified

此方法是DOM变动事件中的方法，它是在DOM结构中发生任何变化时触发，用在可编辑状态下的div标签

input标签不可以用此方法

3.js 的 oninput & onpropertychange 方法

jquery中并没有相应效果的方法，我们可以通过bind绑定input propertychange方法

<input />和<div contenteditable="true">标签都可以使用

propertychange是为了兼容IE9以下的版本

<body>
		<div class="keyboard-event">
			<label>请输入</label>
			<input typ="text" name="" class="input-key"/>
			<div>
				<span>编辑状态的div</span>
				<div class="div-content" contenteditable="true"></div>
			</div>
		</div>
		<script>
			$(document).ready(function(){
				//input标签绑定input propertychange
				$(".input-key").bind("input propertychange",function(){
					var self=$(this);
					console.log("input获取的值----"+self.val());
				});
				//可编辑状态下的div绑定input propertychange
				$(".div-content").bind("input propertychange",function(){
					var self=$(this);
					console.log("div获取的值----"+self.text());
				});
			});
		</script>
	</body>

经过测试，可编辑状态下的div在IE10(包括IE10)以下版本的浏览器都不支持此属性，因为没有比IE10更高的浏览器，目前只测试到IE10

4.定时器setInterval()

思路：当文本框获取焦点时开启定时器，每隔一定的毫秒数去获取文本的值，看是否发生变化，根据需求，去做相应的操作，最后一定要关闭掉定时器，要不然setInterval() 方法会不停地调用函数

适用于所有的可编辑状态的标签，能监听到复制过来的文字，也能监听搜狗拼音中文状态下的回车事件，解决了keyup事件回车时监听不到的情况，灵活性好，根据项目实践经验推荐使用此方法

//获取焦点
$(".div-content").focus(function(){
	var self=$(this);
	interval=setInterval(function(){
		//TODO
		console.log("获取文本的值-----"+self.text());
	},200)
});
//失去焦点
$(".div-content").blur(function(){
	clearInterval(interval);
});

转载于:https://my.oschina.net/u/3680343/blog/1604004