Js/jQuery方法實現實時監聽input輸入框值變化

2019-05-07JavaScript4120
  • 詳情內容
  • 留言點評

網頁前端開發經常需要即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的用戶體驗感,采用onchange時間往往是在輸入框失去焦點(onblur)時候觸發,有時候并不能滿足條件。我們來看一下不同事件在不同瀏覽器中的表現:

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

oninput:主要是針對onpropertychange的非IE瀏覽器版本,支持firefox和opera等瀏覽器,不同的是它綁定于對象時,并非該對象所有屬性改變都能觸發事件,它只在對象value值發生改變時奏效。

onchange: (a)當前對象屬性改變,并且是由鍵盤或鼠標事件激發的(腳本觸發無效);(b)當前對象失去焦點(onblur);

jQuery方法

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

原生JavaScript方法

<script type="text/javascript">
    // Firefox, Google Chrome, Opera, Safari, Internet Explorer 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 type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field">

注:以上方法同樣適用于textarea文本框。

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金