js事件入门（4）

最新推荐文章于 2024-06-12 08:41:10 发布

大地飞鸿

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量74

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/keledon/article/details/103564559

版权

javascript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

4.表单事件

表单事件处理主要用来验证表单，可以处理用户在表单上所做的任何操作。

4.1.onsubmit事件

当用户点击submit按钮来提交表单时，就会触发onsubmit事件，如果事件处理程序返回一个false，就会阻止表单提交，表单就不会发送数据到服务器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var oForm = document.getElementsByTagName("form")[0];
				//表单提交到时候，弹出一个1，然后返回false阻止表单提交
				oForm.onsubmit = function(){
					alert(1);
					//如果最后返回的是true 表单会提交到服务器
					return false;
				}
			}
		</script>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post">
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

4.2.onchange

修改表单字段的时候触发该事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				 var oInput = document.getElementById('chk');
				 //选中或者去掉选中状态的时候触发
				 oInput.onchange = function(){
				 	alert(1);
				 }
			}
		</script>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post">
			<input type="checkbox" name="" id="chk" value="" /> 
		</form>
	</body>
</html>

4.3.onfocus 获取焦点事件

当获取到焦点到时候触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				 var oInput = document.getElementById('txt');
				 //获取焦点的时候，将文本框的内容清空
				 oInput.onfocus= function(){
				 	oInput.value = "";
				 }
			}
		</script>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post">
			<input type="text" name="" id="txt" value="请输入用户名" /> 
		</form>
	</body>
</html>

4.4.onblur失去焦点事件

当失去焦点的时候触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				 var oInput = document.getElementById('txt');
				 //失去焦点的时候给文本框加默认值
				 oInput.onblur= function(){
				 	oInput.value = "请输入用户名";
				 }
			}
		</script>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post">
			<input type="text" name="" id="txt" value="" /> 
		</form>
	</body>
</html>

螺钉课堂视频课程地址：http://edu.nodeing.com

大地飞鸿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js事件入门（4）

4.表单事件表单事件处理主要用来验证表单，可以处理用户在表单上所做的任何操作。4.1.onsubmit事件当用户点击submit按钮来提交表单时，就会触发onsubmit事件，如果事件处理程序返回一个false，就会阻止表单提交，表单就不会发送数据到服务器。<!DOCTYPE html><html> <head> <meta charset...
复制链接

扫一扫