Js/jQuery實時監聽輸入框值變化

前言

在做web開發時候很多時候都需要即時監聽輸入框值的變化，以便作出即時動作去引導瀏覽者增強網站的用戶體驗感。而采用onchange時間又往往是在輸入框失去焦點（onblur）時候觸發，有時候並不能滿足條件。

首先看一下dom中元素事件：

• onpropertychange： IE下，當一個HTML元素的屬性改變的時候，都能通過 onpropertychange來即時捕獲。onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才可以激活該事件。 在用js腳本改動該元素值時候亦能觸發onpropertychange事件。
• oninput：是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不同，它綁定於對象時，並非該對象所有屬性改變都能觸發事件，它只在對象value值發生改變時奏效。
• onchange： (a)當前對象屬性改變，並且是由鍵盤或鼠標事件激發的（腳本觸發無效）；(b)當前對象失去焦點(onblur);

jQuery用法

$("#input1").bind("input propertychange change",function(event){
       console.log($("#input1").val())
});

原生Js

 <script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
        function OnInput (event) {
            alert ("The new content: " + event.target.value);
        }
    // Internet Explorer
        function OnPropChanged (event) {
            if (event.propertyName.toLowerCase () == "value") {
                alert ("The new content: " + event.srcElement.value);
            }
        }
 </script>
 //Input標簽
 <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

 

 

 

轉: https://blog.csdn.net/idomyway/article/details/79078625