oninput:
oninput 事件在使用者輸入時觸發。該事件在<input>或者<textarea>元素的值發生改變時觸發;
無論是鍵盤輸入還是滑鼠粘貼的改變都能及時監聽到變化;
提示:
該事件類似于 onchange 事件。
不同之處在于:
oninput 事件在元素值發生變化時立即觸發;onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
浏覽器支援:
Chrome,Opera,IE9,Firefox4.0,Safari5.0$("input[name=cities]").bind("input propertychange",function(){ var r=$(this).val(), i=$(this),n=t; error=n.test(r)?"":errorMsgs[0][e], ""!=error?i.after("<div class='error'>"+error+"</div>"):$(".error").remove(); if($("input[name="+e+"]").val()==''){ $(this).after("<div class='error'>"+error+"</div>"); } })
onchange:
onchange 事件會在域的内容改變時發生。也可用于單選框與複選框改變後觸發的事件。
onchange 屬性可以使用于: <input>, <select>, 和 <textarea>。
觸發事件必須滿足兩個條件:a)目前對象屬性改變,并且是由鍵盤或滑鼠事件激發的(腳本觸發無效)b)目前對象失去焦點(onblur)浏覽器支援:
所有主流浏覽器均支援
onkeypress:
onkeypress 屬性在按下按鍵時觸發;就是能監聽鍵盤事件,滑鼠複制黏貼操作它就無能為力嘞。。。。。
提示:
與 onkeypress 事件相關的事件觸發順序:
注意:
- onkeydown
- onkeypress
- onkeyup
onkeypress 事件在是以浏覽器中不能觸發所有按鍵(例如:ALT, CTRL, SHIFT, ESC) 。
如果隻對使用者是否已經按下一個按鍵檢測, 可以使用 onkeydown 取代, onkeydown被所有按鍵觸發。
onkeypress 屬性不能使用與以下元素: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。
浏覽器支援:
所有主流浏覽器均支援;
onpropertyChange:
propertychange,隻要目前對象屬性發生改變。(IE專屬的)
不用考慮是否失去焦點,不管js操作還是鍵盤滑鼠手動操作,隻要HTML元素屬性發生改變即可立即捕獲到
關于幾個事件的差別:
1. oninput&onchange:
相同:oninput和onchange都是事件對象,當輸入框的值發生改變時觸發該事件。
不同:oninput是在值改變時立即觸發;onchange是在值改變後失去焦點才觸發,并且可以用在非輸入框中,如:select等。
2. onchange&onpropertychange:
onchange事件在内容改變(兩次内容有可能還是相等的)且失去焦點時觸發;
onpropertychange事件卻是實時觸發,即每增加或删除一個字元就會觸發,通過js改變也會觸發該事件,但是該事件IE專有。
3. oninput&onpropertychange:
oninput事件是IE之外的大多數浏覽器支援的事件,在value改變時觸發,實時的,即每增加或删除一個字元就會觸發,然而通過js改變value時,卻不會觸發;onpropertychange事件是任何屬性改變都會觸發的,而oninput卻隻在value改變時觸發,oninput要通過addEventListener()來注冊,onpropertychange注冊方式跟一般事件一樣。(此處都是指在js中動态綁定事件,以實作内容與行為分離)
注意:oninput與onpropertychange失效的情況:
(a)oninput事件:a). 當腳本中改變value時,不會觸發;(b)onpropertychange事件:b). 從浏覽器的自動下拉提示中選取時,不會觸發。當input設定為disable=true後,onpropertychange不會觸發。
******PS ******
由于 onpropertychange為IE專屬,其他浏覽器如果想要實作這一實時監聽的功能,就要用到HTML5中的标準事件oninput,不過IE9以下的浏覽器是不支援oninput事件的。 是以我們需要綜合oninput和onpropertychange二者來實作文本區域實時監聽的功能。舉例如下:
例1、對支援oninput的浏覽器用oninput,其他浏覽器(IE6/7/8)使用onpropertychange:
var testinput = document.createElement('input');
if('oninput' in testinput){
object.addEventListener("input",fn,false);
}else{
object.onpropertychange = fn;
}
例2、對所有ie使用onpropertychange,其他浏覽器用oninput:
var ie = !!window.ActiveXObject;
if(ie){
object.onpropertychange = fn;
}else{
object.addEventListener("input",fn,false);
}
*******************************************轉自:http://www.bkjia.com/webzh/874397.html****************************************
******PS ******
Input 控件的Onchange 與onBlur 事件不同?
Onchange是文本修改了時候觸發的事件,onBlur是失去焦點觸發的事件