oninput onpropertychange「建议收藏」

oninput 是 HTML5的标准事件,对于检测 textarea,input:text,input:password和input:search  oninput 事件在IE9以下版本不支持,是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生

大家好,又见面了,我是你们的朋友全栈君。

oninput 是 HTML5的标准事件,对于检测 textarea, input:text, input:password 和 input:search    oninput 事件在 IE9 以下版本不支持,是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

oninput要通过addEventListener()来注册,onpropertychange注册方法与一般事件相同。

onchange触发事件必须满足两个条件:
 a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
 b)当前对象失去焦点(onblur);
       也就是说并不是我们在打字的时候就会触发,而是在打完这后,焦点移出去之后,才触发;只有人工触发才有效,如果利用 JavaScript 程序改变是没有效果的。

 onpropertychange    只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;


 在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。 

onpropertychange的bug     
在代码实现时,发现在响应用户onclick了textarea时,如果使用obj.className=”XX”;来改变textarea输入框中字体的样式,会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug,因此需要这样设置:obj.style.color=”#000″;

 oninput与onpropertychange失效的情况:

oninput事件:

(1)当脚本中改变value时,不会触发;

(2)从浏览器的自动下拉提示中选取时,不会触发;

onpropertychange事件:

当input设置为disable=true后,不会触发。


onpropertychange 这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
  • 修改了 select 元素的选中项,selectedIndex 属性发生变化。

  在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。


oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search    oninput 事件在 IE9 以下版本不支持,是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

oninput要通过addEventListener()来注册,onpropertychange注册方法与一般事件相同。

onchange触发事件必须满足两个条件:
 a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
 b)当前对象失去焦点(onblur);

       也就是说并不是我们在打字的时候就会触发,而是在打完这后,焦点移出去之后,才触发;只有人工触发才有效,如果利用 JavaScript 程序改变是没有效果的。

 onpropertychange    只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;


 在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。 




onpropertychange的bug     
在代码实现时,发现在响应用户onclick了textarea时,如果使用obj.className=”XX”;来改变textarea输入框中字体的样式,会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug,因此需要这样设置:obj.style.color=”#000″;


 oninput与onpropertychange失效的情况:

oninput事件:

(1)当脚本中改变value时,不会触发;

(2)从浏览器的自动下拉提示中选取时,不会触发;

onpropertychange事件:

当input设置为disable=true后,不会触发。




onpropertychange 这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
  • 修改了 select 元素的选中项,selectedIndex 属性发生变化。

  在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/126761.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【sql修改字段类型大小】

    【sql修改字段类型大小】之前在百度上面查询到修改字段的语句:alerttable表名altercolumn列名类型【大小】nullornotnull;但是执行完这句话后发现报错后来修改一下语句altertable表名modify(列名类型【大小】);ok,编译通过。注意:1.()内不能还有column关键字2.()内不能含有nullornotnull关键字使用第二种修改方式可以顺利执行成功。…

    2022年6月3日
  • TCP的粘包解析「建议收藏」

    TCP的粘包解析「建议收藏」这两天看csdn有一些关于socket粘包,socket缓冲区设置的问题,发现自己不是很清楚,所以查资料了解记录一下: 一.两个简单概念长连接与短连接:1.长连接   Client方与Server方先建立通讯连接,连接建立后不断开,然后再进行报文发送和接收。2.短连接   Client方与Server每进行一次报文收发交易时才进行通讯连接,交易完毕后立即断开连接。此

    2022年8月11日
  • 学生信息管理系统数据库课程设计「建议收藏」

    学生信息管理系统数据库课程设计「建议收藏」一.概述学生信息管理系统是学校管理的重要工具,是学校不可或缺的一部分。随着在校人数的不断增加,教务系统的数量也不断的上涨。学校工作繁杂,资料众多,人工管理信息的难度也越来越大,显然是不能满足实际的需要,效率也是很低的。并且这种传统的方式存在着众多的弊端,如:保密性差.查询不便.效率低,很难维护和更新等,然而,本系统针对以上的缺点能够极大的提高学生信息管理的效率,也是科学化.正规化的管理,与世界接轨…

    2022年5月19日
  • linux的crontab用法_crontab详解

    linux的crontab用法_crontab详解crontab是用来让使用者在固定时间或固定间隔执行程序之用,类似于windows的计划任务安装: yum-yinstallvixie-cron yum-yinstallcrontabs启动、关闭、重启:/sbin/servicecrondstart#启动服务/sbin/servicecrondstop#关闭服务/sbin/servicecrond…

    2022年8月24日
  • Docker卸载_docker创建容器

    Docker卸载_docker创建容器Linux服务器Docker卸载某个镜像:首先输入命令dockerimages查看当前docker下有多少镜像:1[root@iZwz9a191mdam4di3dozk3Z~]#dockerimages2REPOSITORYTAGIMAGEIDCREATEDSIZE3mysql…

    2022年9月8日
  • vue中上传文件_vue下载文件乱码

    vue中上传文件_vue下载文件乱码vue文件上传下载报文件损坏

    2022年8月15日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号