onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件
Onchange:当文字值改变时,产生该事件
onpropertychange:当元素属性改变时,产生该事件 (限IE浏览器)
Onselect:当文字加亮后,产生该文件
1、可以这样说,onpropertychange要比onchange先触发事件,前者是有连带反映的。
举个例子,前者更适合做搜索提示,后者则不适合;后者更适合做计算器,而前者则不适合!
2、 用onpropertychange,oninput事件解决onchange事件的不足.
onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.
这样一来问题就解决了.
那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了.
但是oninput有个诡异,必须用addEventListener的方式来绑定事件.否则无效.
好了, 以下是演示例子, 主流浏览器都没问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com</title>
<style type="text/css">
*{font-size:14px;font-family:'Comic Sans MS', Verdana}
body {margin-left:20px}
</style>
</head>
<body>
<p>使用onchange事件: </p>
<input type="text" id="txt1" />
<p>使用onpropertychange/oninput事件: </p>
<input type="text" id="txt2" />
<p>结果:</p>
<input type="text" id="txt" />
<script type="text/javascript">
var $ = function(o) {
return document.getElementById(o)
};
$('txt1').onchange = function() {
$('txt').value = this.value;
}
$('txt2').onpropertychange = function() {
$('txt').value = this.value;
}
if (window.addEventListener) {
$('txt2').addEventListener('input', function() {$('txt').value = this.value}, false);
}
</script>
</body>
</html>
3、onchange和onpropertychange详细区别
当一个HTML元素的属性用javascript改变的时候,都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
也就是说:onpropertychange 事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下,而onchange只有在用键盘改变其值,然后在失去焦点(onblur)后才触发,用 js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变,只要有改的相应操作就可能触发。有时当上面 两时间都不能满足需求时,可以考虑只用onblur。
4、还有一点要注意到,当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事件!')" onchange="alert('触发了onchange事件!')" size="30" >
<input name="testbutton1" value="通过js改变文本框中的值" type="button" onclick="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" onblur="alert('触发了onblur事件!')" onchange="alert('触发了onchange事件!')" size="30" >
<input name="testbutton2" value="通过js改变文本框中的值" type="button" onclick="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" onblur="alert('触发了onblur事件!')" onpropertychange="alert('触发了onpropertychange事件!')" size="30" >
<input name="testbutton3" value="通过js改变文本框中的值" type="button" onclick="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" onblur="alert('触发了onblur事件!')" onpropertychange="alert('触发了onpropertychange事件!')" onchange="alert('触发了
onchange事件!')" size="30" >
<input name="testbutton4" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha4').value='js改变文本框后的值'">
<br>
<div>
</body>
</html>
脚本应用:
function textCounter(field,maxlimit)
{
if(field.value.length > maxlimit)
{
field.value = field.value.substring(0,maxlimit);
}
}
分享到:
相关推荐
51单片机
双级式储能模型,可做充放电转以及低电压故障穿越,含有负序抑制模块,可做对称故障与不对称故障
郑州升达大学2024-2025第一学期计算机视觉课程期末试卷,原版。配套教材为《OpenCV计算机视觉基础教程》夏帮贵主编。
线切割课后试题
目录 摘 要 1 一、设计任务概述 3 1.1 设计目的 3 1.2 项目任务和要求 3 1.3 参考资料 3 二、项目开发环境 4 三、项目需求分析 5 四、 项目设计和实现 5 4.1 总体设计 5 4.2 功能设计 6 4.3 系统实现 7 五、系统运行和测试 12 六、设计总结 15 七、附录 16 7.1 程序清单 16 7.2 其他需要说明的内容 23。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。
智慧物联网系统发展战略研究
该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven
该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven
电机与拖动技术三级项目报告,直流电动机是电机的主要类型之一,具有调速范围广、调速特性平滑、过载能力强等优点,在生产生活中具有广泛的应用。此次课程项目阐述了直流电动机的结构、应用、并着重对电枢回路串电阻分级启动进行深入研究,MATLAB仿真软件对直流电动机分级启动进行仿真。
详细说明:https://blog.csdn.net/a342874650/article/details/144989766 在 Web 应用中,恶意用户可能会通过频繁刷新接口或进行暴力请求来攻击系统,导致服务器负载过高或服务不可用。为了应对这一问题,本文将详细介绍如何使用 Spring Boot 结合拦截器(Interceptor)和 Redis 来实现基于 URL 和 IP 的访问频率限制。具体实现包括拦截器拦截请求、Redis 存储访问记录、检测访问频率并在达到限制时禁用 IP 的完整过程。通过本文的详细实现过程和完整源代码,读者可以快速掌握如何在自己的项目中应用这一机制来增强系统的安全性和稳定性。
内容概要:本文详细介绍了JavaEE核心技术,涵盖多个重要的Web框架和持久层技术,以及其应用场景和实施方案。具体内容包括:①Struts框架的特点和功能,特别是其对MVC架构的支持,以及如何应用于薪资管理系统;②MVC架构的基本概念和如何通过JSP、JavaBean及Servlet实现成绩管理系统;③Spring IoC容器的工作原理,强调其控制反转和依赖注入功能,展示了整合Struts和JPA的具体案例,如通讯管理系统Web层设计方案;④Spring MVC结构及其XML配置方法,并提出一种针对图书管理系统的Spring MVC实现思路;⑤深入探讨Spring AOP原理,介绍如何使用XML配置进行统一事务处理的应用方案;⑥分析Hibernate核心接口及设备管理系统持久层设计方案;⑦整合Hibernate和Spring IoC实现的成绩管理系统持久层设计方案。 适合人群:具备一定Java基础的初、中级JavaEE开发者,对JavaWeb开发有兴趣的学习者。 使用场景及目标:①帮助开发者理解JavaEE关键技术和框架的实际运用,提高项目开发技能;②指导实际项目的架构设计和技术选型;③促进团队协作,提高代码复用性和维护效率。 阅读建议:建议读者根据自身经验和兴趣选择重点章节仔细研读,并结合实际情况尝试实践,逐步掌握各知识点。此外,还应该结合最新的API文档和技术论坛资料不断跟进更新。
easy-interceptor修改请求头和响应头.zip
Prime_Series_Level-1.z10 别下,这个是分卷压缩,笔者用来备份的
该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven
CST0402B+跟岗实习提交资料.zip
基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目),个人大三大设计项目、经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者,也可作为毕业设计、课程设计、期末大作业。 基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文档说明(高分项目)基于yolov5的医学影像肺结节检测项目源码+文
本金1W利息0.0325,几年能double?
matlab机械臂关节空间轨迹规划,3-5-3分段多项式插值法,六自由度机械臂,该算法可运用到仿真建模机械臂上实时运动,可视化轨迹,有角度,速度,加速度仿真曲线。 也可以有单独角度,速度,加速度仿真曲线。 可自行更程序中机械臂与点的参数。 谢谢大家 (程序中均为弧度制参数)353混合多项式插值
2011-2023年各省金融监管水平数据(含原始数据+计算过程+计算结果) 1、时间:2011-2023年 2、来源:国家统计J、统计NJ 3、指标:金融业增加值、金融监管支出、金融监管水平 4、计算方法:金融监管水平=金融监管支出/金融业增加值
本表名称为简易手写识字表,收录了21000多个汉字,每个汉字后面附上了简易手写笔画和输入编码。独体字是一个主笔画和一个字母编码,双码字是两个主笔画组合和两个字母编码,多码字是两个主笔画组合和三个字母编码。可用于识字、简易手写和大键盘汉字输入等参考。