input輸入框內容變化實時監聽
js實現的文本框內容發生改變立馬觸發事件簡單介紹:
本章節介紹一下如何在文本框的內容發生變化的時候，立馬觸發一個事件執行響應的操作，而不是像是keydown或者keyup事件一樣，只能夠檢測通過鍵盤輸入導致內容的變化， 下面就通過代碼實例做一下簡單介紹。
一.相關知識準備:
1.onchange事件:
此事件會在元素內容發生改變，且失去焦點的時候觸發。
瀏覽器支持度較好。
2.onpropertychange事件:
此事件會在元素內容發生改變時立即觸發，即便是通過js改變的內容也會觸發此事件。
元素的任何屬性改變都會觸發該事件，不止是value。
只有IE11以下瀏覽器支持此事件。
3.oninput事件:
此事件會在value屬性值發生改變時觸發，通過js改變value屬性值不會觸發此事件。
只有IE8以上或者谷歌火狐等標準瀏覽器支持。
二.代碼實例:
既然知道各個事件的特性，那麽我們可以通過兼容性方法，實現兼容各個瀏覽器的代碼。
代碼如下:
===================================================
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
var otxt=document.getElementById("txt");
var oshow=document.getElementById("show");
var count=0;
if(document.all){
otxt.onpropertychange=function(){
count=count+1;
oshow.innerHTML=count;
}
}
else{
otxt.oninput=function(){
count=count+1;
oshow.innerHTML=count;
}
}
}
</script>
</head>
<body>
<div id="show"></div>
<input type="text" id="txt" value="螞蟻部落"/>
</body>
</html>
===============================================================
propertychange（ie）和input事件
input是標準的瀏覽器事件，一般應用於input元素，當input的value發生變化就會發生，無論是鍵盤輸入還是鼠標
黏貼的改變都能及時監聽到變化
propertychange，只要當前對象屬性發生改變。（IE專屬的）
但是
oninput 和 onpropertychange 這兩個事件在 IE9 中都有個小BUG，
那就是通過右鍵菜單菜單中的 剪切 和 刪除 命令刪除內容的時候不會觸發，
而 IE 其他版本都是正常的，目前還沒有很好的解決方案。
| 1 2 3 4 5 6 7 |
$(function(){
$("input[type=‘search‘]").bind(‘input propertychange‘,function(){
//做一些事情
var val = $(this).val();
console.log(val);
})
});
|
keypress 就是能監聽鍵盤事件，鼠標復制黏貼操作他就無能為力
change事件 觸發事件必須滿足兩個條件：
a）當前對象屬性改變，並且是由鍵盤或鼠標事件激發的（腳本觸發無效）
b）當前對象失去焦點(onblur)
--------------------------------------分割線 --------------------------------------
之前一直用change事件來監聽輸入框內容是否發生變化，只有當輸入框失去焦點時才會觸發，沒想到html5還有個input事件，只要輸入框內容發生變化就會立即觸發，既然有這麽好的東西我們幹嘛放著不用呢，接下來就來給大家介紹一下：
如果我們頁面上有這樣一個簡單到極致的輸入框：
<input type="text">
那麽我們現在用jquery給它綁定input事件，如下：
$("input:text").bind("input propertychange",function(){
console.log($(this).val().length);//打印輸入框字符長度
});
這樣一來只要輸入框內容發生變化，都會立即打印出裏面字符串的長度來了。
需要註意的是input事件是html5的東東，IE9以下版本中是無法支持的，所以需要用propertychange事件來代替。
input事件除了能夠監聽input:text元素的內容變化，同時還可以監聽input:password,input:search以及textarea這幾個元素，在html綁定的寫法為：
<input type="text" oninput="onInput(event)" onpropertychange="onPropertyChange(event)">
input輸入框內容變化實時監聽