表单事件
onblur//失去焦点时
onchange //内容被改边时
onfocus //获取焦点时
.oninput //用户输入时
onreset//当表单被重置时，作用于form标签
onselect//当内容被选中时
onsubmit //当表单被提交时，作用于form标签；
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#">
<input type="text" name="n1"/>
<input type="text" name="n2"/>
<input type="text" name="n3"/>
<input type="text" name="n4"/>
<input type="text" name="n5"/>
<input type="text" name="n6"/>
<input type="text" name="n7"/>
<input type="reset" />
<input type="submit" />
</form>
<script>
var n=document.querySelectorAll(‘[name]‘);
var form=document.querySelector(‘form‘);
console.log(form);
n[0].onblur=function(){
this.value=‘失去焦点了‘;
//失去焦点时
}
n[1].onchange=function(){
this.value=‘改不了‘;
//内容被改边时
}
n[2].onfocus=function(){
this.value=‘获取焦点‘;
//获取焦点时
}
n[3].oninput=function(){
this.value=‘想输入没门？‘;
//用户输入时
}
form.onreset=function(){
alert(‘清空了‘);
//当表单被重置时，作用于form标签
}
n[4].onselect=function(){
this.value=‘选中我想干嘛‘;
//当内容被选中时
}
form.onsubmit=function(){
alert(‘恭喜你提交成功‘);
//当表单被提交时，作用于form标签；
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/GreenRadish/p/11172112.html
时间： 2024-07-30 11:23:48