oninput、onchange 和 onpropertyChange 事件

    xiaoxiao2021-03-25  70

    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). 从浏览器的自动下拉提示中选取时,不会触发。

    (b)onpropertychange事件:

    当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是失去焦点触发的事件

    转载请注明原文地址: https://ju.6miu.com/read-39607.html

    最新回复(0)