實時監聽div,input內容改變並獲取值(包括指令碼動態新增)
在DOM中可以通過DOMNodeInserted和DOMNodeRemoved這兩個事件來監視DOM元素的插入和移除。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>實時監聽div,input內容改變並獲取值</title>
</head>
<body>
<div id="box">
<input type="text" id="sousuo">
<button id="add">[動態新增]</button>
</div>
<button id="addAgain">新增</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 注意:如果你直接複製所有程式碼到本地,上述js路徑需要改成你本地的 -->
<script>
// 實時監聽div
$('#addAgain').click(function () {
$('#box').append("<div>新增的</div>")
})
$("#box").on('DOMNodeInserted', function() {
console.log("div發生改變:"+$("#box").text())
})
// 實時監聽input
$("#sousuo").on('input propertychange', function() {
console.log("input發生改變:"+$("#sousuo").val())
})
// 實時監聽input|textarea內容變化,包含js動態新增的內容
$("#sousuo").on("input propertychange blur change",function () {
console.log("input發生改變:"+$("#sousuo").val())
})
$("#add").on('click',function () {
$("#sousuo").focus();
$("#sousuo").val($("#sousuo").val()+$(this).text())
$("#sousuo").blur();
})
</script>
</body>
</html>
相關文章
- JavaScript監聽文字節點內容改變JavaScript
- JavaScript實時監聽input中值變化JavaScript
- 實時監聽input輸入框value的變化:
- uniapp獲取通知欄內容 監聽通知欄內容APP
- JavaScript動態建立div並新增樣式JavaScript
- Android 監聽鍵盤狀態變化,並獲取鍵盤高度Android
- 監聽div滾動高度
- app直播原始碼,監聽EditText輸入框內輸入內容的變化APP原始碼
- JavaScript監聽屬性改變JavaScript
- PHP執行耗時指令碼實時輸出內容PHP指令碼
- JavaScript 監聽子節點改變JavaScript
- Python監測監聽螢幕介面內容變化併傳送通知Python
- jquery實現改變所匹配的內容jQuery
- 靜態程式碼安全檢測服務包括哪些內容?
- 動態監聽輸入框值的變化
- vue 動態監聽視窗大小變化事件Vue事件
- JavaScript監聽後代節點改變JavaScript
- 對於動態載入內容 (包括 Ajax 請求內容) 繫結點選事件事件
- div實現input
- CSS 動畫方式改變 div 尺寸CSS動畫
- jquery js 設定 div 的內容,給 div 新增一個屬性jQueryJS
- 滑鼠懸浮div動畫改變尺寸動畫
- 視訊直播原始碼,新增內容滑動條,停止滑動時隱藏原始碼
- 微信聊天內容可以被監聽嗎
- vue之實現日曆----顯示農曆,滾動日曆監聽年月改變Vue
- 動態監控input的值的變化 賦值value觸發賦值
- 現版本小程式暫時無法監聽webview頁面高度改變WebView
- JavaScript動態新增和刪除div元素JavaScript
- input[type=file] 獲取上傳檔案的內容
- Flutter 滾動監聽及實戰appBar滾動漸變FlutterAPP
- 如何使用python指令碼定時清空檔案內容?Python指令碼
- vue監聽頁面中的某個div的滾動事件,並判斷滾動的位置Vue事件
- 使用RecyclerView動態改變item時遇到的坑View
- JavaScript動態建立div並寫入文字JavaScript
- 短影片app原始碼,自動捲軸擋住 div內容APP原始碼
- 監聽DOM載入完成及改變——MutationObserver應用Server
- 動態的控制Panel的顯隱並控制其內容
- 運維指令碼: 實時監測登入運維指令碼