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)
上一篇 2022年4月8日 下午12:00
下一篇 2022年4月8日 下午12:20


相关推荐

  • 用JS来动态设置CSS样式的八种方式

    用JS来动态设置CSS样式的八种方式转自 微点阅读 https www weidianyuedu com 用 JS 来动态设置 CSS 样式 常见的有以下几种 1 直接设置 style 的属性某些情况用这个设置 important 值无效如果属性有 号 就写成驼峰的形式 如 textAlign 如果想保留 号 就中括号的形式 element style text align 100px element style height 100px 2 直接设置属性 只能用于某些属性 相关样式会自动识别 element

    2026年3月16日
    2
  • Pycharm搜索操作

    Pycharm搜索操作Ctrl N 按文件名搜索 py 文件 Ctrl Shift N 可搜索各种类型的文件 也可以添加 搜索路径 Ctrl Shift F 全局字符串搜索 findinpath 和默认的 win10 输入法切换简繁体的快捷键冲突 可在 File Settings Keymap 中查找 findinpath 进行设置 Ctrl F 搜索本页字符串 Ctrl S

    2026年3月27日
    2
  • ingress什么意思_k8s kong

    ingress什么意思_k8s kongk8sIngress介绍Http代理Https代理Ingress介绍我们已经知道,Service对集群之外暴露服务的主要方式有两种:NodePort和LoadBalancer,但是这两种方式,都有一定的缺点:NodePort方式的缺点是会占用很多集群机器的端口,那么当集群服务变多的时候,这个缺点就愈发明显。LoadBalancer的缺点是每个Service都需要一个LB,浪费,麻烦,并且需要kubernetes之外的设备的支持。基于这种现状,kubernetes提供了Ingress资源对象,I

    2022年8月9日
    4
  • SCL语言_scl语言优势

    SCL语言_scl语言优势西门子SCL语言处理数据的“先进先出”处理案例先进先出,是指根据先入库先发出的原则,对于发出的存货以先入库存货的单价计算发出存货成本的方法。(1)、建立数据(自己设计,自己理解的,如有错误请指教)建立一个DB块,在DB块中建立上面图的数据,“先进”的解释:在名称read的数据写入变量,把名称位read_start的值写为1,read的数据写入下面write/read_no的数组中,反复操作,先进来的数据会排列到数组数据的最上层,依次是后进来的数据。直到把数组填充满而无法写入。“先出”..

    2022年10月6日
    4
  • Modbus协议解析–小白一看就懂的协议

    Modbus协议解析–小白一看就懂的协议文章目录提问三连 1 什么是 Modbus 2 Modbus 用来干什么 3 Modbus 的内容是什么 提问三连什么是 Modbus Modbus 用来干什么 Modbus 怎么用 1 什么是 Modbus 顾名思义 他是一个 bus 即总线协议 如果你接触到这种协议 相信你所处的行业是工业方面或者你的产品用于工业 Modbus 是一种串行通信协议 是 Modicon 公司 现在的施耐德电气 Schn

    2026年3月19日
    2
  • hough变换检测直线原理(opencv霍夫直线检测)

    直线的霍夫变换:霍夫空间极坐标与图像空间的转换公式:p=y*sin(theta)+x*cos(theta);之后遍历图像的每个坐标点,每个坐标点以一度为增量,求取对应的p值,存入数组中,查找数组中数目大于一定阈值的p和theta,再在图像空间中把直线恢复出来霍夫变换就是把图像左边空间上的线段转换到霍夫空间一个点,然后通过点的数目多少来确定是否为一条线段(但是画出的结果为一条

    2022年4月16日
    98

发表回复

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

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