HTML5 input事件檢測輸入框變化

之前一直用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)">

--------------------------------------分割線 --------------------------------------

HTML5 地理位置定位(HTML5 Geolocation)原理及應用 http://www.linuxidc.com/Linux/2012-07/65129.htm

HTML5移動開發即學即用(雙色) PDF+源碼 http://www.linuxidc.com/Linux/2013-09/90351.htm

HTML5入門學習筆記 http://www.linuxidc.com/Linux/2013-09/90089.htm

HTML5移動Web開發筆記 http://www.linuxidc.com/Linux/2013-09/90088.htm

HTML5 開發中的本地存儲的安全風險 http://www.linuxidc.com/Linux/2013-06/86486.htm

《HTML5與CSS3權威指南》及相配套源碼 http://www.linuxidc.com/Linux/2013-02/79950.htm

關於 HTML5 令人激動的 10 項預測 http://www.linuxidc.com/Linux/2013-02/79917.htm

HTML5與CSS3實戰指南 PDF http://www.linuxidc.com/Linux/2013-02/79910.htm

--------------------------------------分割線 --------------------------------------