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輸入框內容變化實時監聽