实时监听的几种方法

时间 2019-12-14

标签实时监听几种方法繁體版

原文原文链接

1.keyup

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

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

2.DOMSubtreeModified

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

input标签不能够用此方法jquery

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更高的浏览器，目前只测试到IE10this

4.定时器setInterval()

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

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

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