js的onchange(js replace函数)

jsonpropertychange函数当一个HTML元素的属性用js改变的时候,都能通过onpropertychange来捕获。例如一个<inputname=”text1″id=”text1″/>对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。也就是说:onpropertychange事…

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

js onpropertychange函数  

当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获。例如一个 <input name=”text1″ id=”text1″ />对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。  
也就是说:onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发,用js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变,只要有改的相应操作就可能触发。有时当上面两时间都不能满足需求时,可以考虑只用onblur。  

还有一点要注意到,当onblur和onchange事件一起用时,onblur会出问题。。。。详见如下  

测试页面:  

<html>  
<head> <title>通过js改变文本框中的值后触发的事件:onpropertychange事件 </title> </head>  
<body>  

<div id=”test1″>  
<b>测试onpropertychange事件和onchange事件一起用时: </b> <br>  
<font color=”red”>测试结果:onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点后才触  

发,用js改变其值不触发 </font>  
<br>  
<input name=”haha1″ type=”text” onpropertychange=”alert(‘触发了onpropertychange事件!’)” οnchange=”alert(‘触发了onchange事件!’)” size=”30″ >  
<input name=”testbutton1″ value=”通过js改变文本框中的值” type=”button” οnclick=”document.getElementById(‘haha1’).value=’js改变文本框后的值'”>  
<br>  
<br>  
<br>  

<div id=”test2″>  
<b>测试只有onblur和onchange事件时: </b> <br>  
<font color=”red”>测试结果:onchange先触发,onblur后触发 </font>  
<br>  
<input name=”haha2″ type=”text” οnblur=”alert(‘触发了onblur事件!’)” οnchange=”alert(‘触发了onchange事件!’)” size=”30″ >  
<input name=”testbutton2″ value=”通过js改变文本框中的值” type=”button” οnclick=”document.getElementById(‘haha2’).value=’js改变文本框后的值'”>  
<br>  
<div>  
<br>  
<br>  
<br>  

<div id=”test3″>  
<b>测试当onblur和onpropertychange事件一起用时: </b> <br>  
<font color=”red”>测试结果:onblur好象出了问题,只要用键盘在文本框中随便输入一个值,便会触发它。可能是onpropertychange把它惹毛了。。。^-^ </font>  
<br>  
<input name=”haha3″ type=”text” οnblur=”alert(‘触发了onblur事件!’)” onpropertychange=”alert(‘触发了onpropertychange事件!’)” size=”30″ >  
<input name=”testbutton3″ value=”通过js改变文本框中的值” type=”button” οnclick=”document.getElementById(‘haha3’).value=’js改变文本框后的值'”>  
<br>  
<div>  
<br>  
<br>  
<br>  
<div id=”test4″>  
<b>测试有onblur、onpropertychange事件和onchange事件一起用时: </b> <br>  
<font color=”red”>测试结果:onblur在和onpropertychange一起用时的问题仍然存在 </font>  
<br>  
<input name=”haha4″ type=”text” οnblur=”alert(‘触发了onblur事件!’)” onpropertychange=”alert(‘触发了onpropertychange事件!’)” οnchange=”alert(‘触发了  

onchange事件!’)” size=”30″ >  
<input name=”testbutton4″ value=”通过js改变文本框中的值” type=”button” οnclick=”document.getElementById(‘haha4’).value=’js改变文本框后的值'”>  
<br>  
<div>  

</body>  
</html> 

转载于:https://www.cnblogs.com/richelle009/archive/2011/08/17/2142850.html

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/126529.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pycharm突然很卡_pycharm启动慢

    pycharm突然很卡_pycharm启动慢使用pycharm时常出现 theIDEisrunninglowonmemory的问题,表示pycharm这款IDE使用内存不足,需要在系统内存充足的情况下扩充IDEmemory。首先,打开File—&gt;Appearance—&gt;WindowsOptions—&gt;选中showmemmoryindicator—&gt;OK右下角会出现 …

  • csv文件格式说明[通俗易懂]

    csv文件格式说明[通俗易懂]csv文件应用很广泛,历史也很悠久。有很多种类型的csv格式,常用的是rfc4180定义的格式。csv文件包含一行或多行记录,每行记录中包含一个或多个字段。记录与记录之间使用换行符分隔,最后一个记

  • WDA原理分析

    WDA原理分析1、什么是WDAWebDriverAgent是Facebook在17年的SeleniumConf大会上推出了一款新的iOS移动测试框架。下面摘录一段官方对于WebDriverAgent的介绍字段:(官方文档:https://github.com/facebook/WebDriverAgent)WebDriverAgent在iOS端实现…

  • Oracle数据库学习之数据类型和表的操作「建议收藏」

    Oracle数据库学习之数据类型和表的操作「建议收藏」Oracle的数据类型:字符型数据类型charvarcharvarchar2long这几个字段之间的区别:char的长度是固定的,而varchar2的长度是可以变化的。也就是char(20)和varchar2(20)都存储”abc”,char是占用20个字符的,而varchar2是占用3个字符空间的。但是char的效率要高与varchar。这也就是平时说的以空间换效率。如果有一

  • Win10 删除默认共享文件夹

    在CMD下删除默认共享文件可能很多人都遇到过此问题,新买的笔记本安装了Win10系统,按照激活的顺序没有administrator账户,系统内只有自己设置的账号。而且,你在cmd或者计算机管理内里进行一些操作时都显示无权限或者拒绝访问。尤其是想关闭掉默认共享的时候,无法完成。解决方法很简单,我们用管理员进入CMD:在运行对话框内输入CMD后,先不要立即回车进入,按住CTRL+SHIFT+EN…

  • [Eureka]REST操作接口清单[通俗易懂]

    [Eureka]REST操作接口清单[通俗易懂]源码地址:https://github.com/Netflix/eureka/wiki数据来源:https://github.com/Netflix/eureka/wiki/Eureka-REST-operationsEureka作为SpringCloud常用的注册中心,其开放了以下接口:注:接口仅支持xml/json两种数据格式,请求时需设定Context-Type为…

发表回复

您的电子邮箱地址不会被公开。

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