HTML5 input事件檢測輸入框變化


之前一直用change事件來監聽輸入框內容是否發生變化,只有當輸入框失去焦點時才會觸發,沒想到html5還有個input事件,只要輸入框內容發生變化就會立即觸發,既然有這么好的東西我們干嘛放着不用呢,接下來就來給大家介紹一下:

如果我們頁面上有這樣一個簡單到極致的輸入框:

1 <input type="text">

那么我們現在用jquery給它綁定input事件,如下:

1 $("input:text").bind("input propertychange",function(){
2 
3   console.log($(this).val().length);//打印輸入框字符長度
4 
5 });

這樣一來只要輸入框內容發生變化,都會立即打印出里面字符串的長度來了。

需要注意的是input事件是html5的東東,IE9以下版本中是無法支持的,所以需要用propertychange事件來代替。

input事件除了能夠監聽input:text元素的內容變化,同時還可以監聽input:password,input:search以及textarea這幾個元素,在html綁定的寫法為:

1 <input type="text" oninput="onInput(event)" onpropertychange="onPropertyChange(event)">

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM