實時監聽的幾種方法

時間 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);
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。