Js實時監聽input輸入框值變化

 <input    oninput="OnInput (event)" onpropertychange="OnPropChanged (event)"   >

<script>
         // 監聽input輸入框信息
                 // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9
                 function OnInput (event) {
                       var userName= event.target.value;
                       console.log(userName);
                }
                // Internet Explorer
                function OnPropChanged (event) {
                    // if (event.propertyName.toLowerCase () == "value") {
                        var userName= event.srcElement.value;
                        console.log(userName);
                    // }
                }
</script>

注意事項：

1：onpropertychange

onpropertychange： IE下，當一個HTML元素的屬性改變的時候，都能通過 onpropertychange來即時捕獲。onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)纔可以激活該事件。 在用js腳本改動該元素值時候亦能觸發onpropertychange事件。

2：oninput

oninput：是onpropertychange的非IE瀏覽器版本，支持firefox和opera等瀏覽器，但有一點不同，它綁定於對象時，並非該對象所有屬性改變都能觸發事件，它只在對象value值發生改變時奏效。