前端笔记68——表单事件

最新推荐文章于 2022-11-19 10:28:43 发布

野生杂学家阿博

最新推荐文章于 2022-11-19 10:28:43 发布

阅读量332

点赞数

分类专栏：前端文章标签：前端 JavaScript 表单 onsubmit onchange

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/86683777

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

我们在网页中做操作可以统称为事件，那么在表单中输入提交属于事件。那这篇博客将分享与表单有关的事件。

表单事件

简单理解，和表单有关的事件。

事件名称和触发场景

事件名称                事件的触发场景

onsubmit               当表单提交的时候触发
onchange               当修改表单字段的时候触发(内容出现改变就会触发)
onfocus                获取焦点事件
onblur                 失去焦点事件

onsubmit事件例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com">
			<input type="text" name="wd" id="ipt"/>
			<button>提交</button>
		</form>
		<script type="text/javascript">
			var oForm = document.getElementsByTagName("form")
			var oIpt = document.getElementById("ipt")
			oForm[0].onsubmit = function(){
				var iptVaule = oIpt.value
				// 验证
				if(iptVaule === ""){
					alert("输入内容不能为空")
					return false
				}
				// return false 可以阻止表单提交
				return true
			}
		</script>
	</body>
</html>

onchange事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post">
			商品单价：<span id="span">198</span>
			商品数量：<input type="text" id="ipt1" value="1"/>
			总价：<input type="text" id="ipt2" value="198"/>
		</form>
		<script type="text/javascript">
			var oIpt1 = document.getElementById("ipt1")
			var oIpt2 = document.getElementById("ipt2")
			var oSpan = document.getElementById("span")
			oIpt1.onchange = function(){
				// 做计算
				var price = oSpan.innerHTML
				console.log("输入数量",price)
				oIpt2.value = price * this.value
				console.log("总价",oIpt2.value)
			}
		</script>
	</body>
</html>

获取交点和失去交点的事件例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="https://www.baidu.com/s" id="fm">
			<input type="text" id="ipt"  value="请输入搜索内容" name="wd"/>
		</form>
		<script type="text/javascript">
			var oIpt = document.getElementById("ipt")
			var oForm = document.getElementById("fm")
			// 绑定获取焦点事件：获取光标闪动
			oIpt.onfocus = function(){
				// 把text输入框内容清空
				oIpt.value = ""
			}
			// 失去焦点事件
			oIpt.onblur = function(){
				// 让text内容恢复原样  当用户没有输入内容的时候
				if(oIpt.value === ""){
					oIpt.value = "请输入搜索内容"
				}
			}
			// 按下回车键表单会自动提交到action设置的地址
			// 当用户没有输入内容的时候，提示不能提交，只有当用户输入内容的时候才可以提交
			oForm.onsubmit = function(){
				if(oIpt.value == ""){
					alert("搜索内容不能为空")
					return false
				}
			}
		</script>
	</body>
</html>