首页 > 编程笔记 > JavaScript笔记
阅读:29
JS change事件:检测表单元素的值是否发生变化
在 JavaScript 中,change 事件类型时在表单元素的值发生变化时触发,它主要用于 input、select 和 textarea 元素。对于 input 和 textarea 元素来说,当它们失去焦点且 value 值改变时触发;对于 select 元素,在其选项改变时触发,也就是不是去焦点,也会触发 change 事件。
focus、blur 和 change 事件经常配合使用。一般可以使用 focus 和 blur 事件来以某种方式改变用户界面,要么是向用户给出视觉提示,要么是向界面中添加额外的功能。例如,为文本框显示一个下拉选项菜单。而 change 事件则经常用于验证用户在字段中输入的数据。
关于 blur 和 change 事件发生顺序并没有严格的规定,不同的浏览器没有统一规定。因此,不能假定这两个事件总会以某种顺序一次触发。
示例1
在下面示例中,当在第 1 个文本框中输入或修改值时,则第 2 个文本框内会立即显示第 1 个文本框中的当前值。<input type="text" id="a" /> <input type="text" id="b" /> <script> var a = document.getElementsByTagName("input")[0]; var b = document.getElementsByTagName("input")[1]; a.onchange = function(){ // 为第一个文本框绑定change事件处理函数 b.value = this.value; // 把第一个文本框中的值传递给第二个文本框 } </script>
示例2
下面示例演示了当在下拉列表框中选择不同的网站时,会自动打开该网站的首页。<select> <option value="http://www.baidu.com/">百度</option> <option value="http://www.google.cn/">Google</option> </select> <script> var a = document.getElementsByTagName("select")[0]; a.onchange = function(){ window.open(this.value,""); // 根据下拉列表框的当前值打开指定的网址 } </script>
示例3
在其他表单元素中也可以应用 change 事件类型。下面示例演示了如何在单选按钮选项组中动态显示变化的值。<input type="radio" name="r" value="1" checked="checked" /> 1 <input type="radio" name="r" value="2" /> 2 <input type="radio" name="r" value="3" /> 3 <script> var r = document.getElementsByTagName("input"); for(var i = 0; i < r.length; i ++ ){ r[i].onchange = function(){ alert(this.value); } } </script>对于 input 元素来说,由于 change 事件类型仅在用户已经离开了元素且失去焦点时触发,所以当执行上面 3 个示例时会明显感觉延迟响应现象。为了更好地提升用户体验,很多时候会根据需要定义在按键松开或鼠标单击时执行响应,这样速度会快很多。
focus、blur 和 change 事件经常配合使用。一般可以使用 focus 和 blur 事件来以某种方式改变用户界面,要么是向用户给出视觉提示,要么是向界面中添加额外的功能。例如,为文本框显示一个下拉选项菜单。而 change 事件则经常用于验证用户在字段中输入的数据。
示例4
下面示例设计一个文本框,只允许用户输入数值。此时,可以利用 focus 事件修改文本框的背景颜色,以便更清楚的表明这个字段获得了焦点。可以利用 blur 事件恢复文本框的背景颜色,利用 change 事件在用户输入了非数字字符时再次修改背景颜色。<form id="myform" method="post" action="javascript:alert('表单提交啦!')"> <p> <label for="comments">请输入数字:</label> <br /> <input type="text" id="txtNumbers" name="numbers" /> </p> <p> <input type="submit" value="提交表单" id="submit-btn" /> </p> </form> <script> var form = document.getElementById("myform"); var numbers = form.elements["numbers"]; numbers.onfocus = function(event){ event = event || window.event; var target = event.target || event.srcElement; target.style.backgroundColor = "yellow"; } numbers.onblur = function(event){ event = event || window.event; var target = event.target || event.srcElement; if (/[^\d]/.test(target.value)){ target.style.backgroundColor = "red"; } else { target.style.backgroundColor = ""; } } numbers.onchange = function(event){ event = event || window.event; var target = event.target || event.srcElement; if (/[^\d]/.test(target.value)){ target.style.backgroundColor = "red"; } else { target.style.backgroundColor = ""; } } numbers.focus(); </script>在上面代码中,onfocus 事件处理程序将文本框的背景颜色修改为黄色,以清楚地表示当前字段已经激活。onblur 和 onchange 事件处理程序则会在发现非数值字符时,将文本框背景色修改为红色。为了测试用户输入的是不是非数值,这里针对文本框的 value 属性使用了简单的正则表达式。而且,为确保无论文本框的值如何变化,验证规则始终如一,onblur 和 onchange 事件处理程序中使用了相同的正则表达式。
关于 blur 和 change 事件发生顺序并没有严格的规定,不同的浏览器没有统一规定。因此,不能假定这两个事件总会以某种顺序一次触发。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频