前言
我们在网页中做操作可以统称为事件,那么在表单中输入提交属于事件。那这篇博客将分享与表单有关的事件。
表单事件
简单理解,和表单有关的事件。
事件名称和触发场景
事件名称 事件的触发场景
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>