oninput、onchange 和 onpropertyChange 事件

最新推荐文章于 2021-04-13 10:37:05 发布

珍妮的小罐君

最新推荐文章于 2021-04-13 10:37:05 发布

阅读量1k

点赞数

分类专栏： WEB JavaScript 文章标签： oninput onchange onproperty value 即时搜索

本文链接：https://blog.csdn.net/qq_36671474/article/details/61914186

版权

JavaScript 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

WEB

20 篇文章 1 订阅

订阅专栏

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

珍妮的小罐君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
oninput、onchange 和 onpropertyChange 事件

oninput：oninput 事件在用户输入时触发。该事件在或者元素的值发生改变时触发；无论是键盘输入还是鼠标粘贴的改变都能及时监听到变化；提示：该事件类似于 onchange 事件。不同之处在于： oninput 事件在元素值发生变化时立即触发； onc
复制链接

扫一扫