實時監聽div,input內容改變並獲取值(包括指令碼動態新增)

Heerey525發表於2018-09-29

 在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>

 

相關文章