Js/jQuery實時監聽input輸入框值變化
阿新 • • 發佈:2019-01-08
前言
在做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",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" />