表单事件
- onfocus
元素获得焦点时触发 - onblur
元素失去焦点时触发 - onchange
表单元素的内容改变时触发 - onsubmit
submit时触发 - onreset
reset时触发
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function testFocus(){
console.log("获得焦点了")
}
function testBlur(){
console.log("失去焦点了")
}
function testChange(value){
console.log("内容改变为"+value)
}
function testSubmit(){
var flag = confirm("确定提交表单么？")
if(!flag){
//在这里我们有机会阻止表单的提交
//event.preventDefault();//阻止组件的默认行为
return false;
}
return true;
}
function testReset(){
alert("表单要重置了")
}
</script>
</head>
<body>
<form action="my.html" method="get" onsubmit="testSubmit()" onreset="testReset()">
用户昵称：<input type="text" name="realName" onfocus="testFocus()" onblur="testBlur()" onchange="testChange(value)"> <br>
登录账号：<input type="text" name="loginName"> <br>
选择籍贯：
<select name="" id="" onchange="testChange(value)">
<option >北京</option>
<option >上海</option>
<option >广州</option>
</select>
<input type="submit" value="注册">
<input type="reset" value="清空">
</form>
</body>
</html>
