本文经授权转载自公众“前端大学”
表单事件有：
属性 | 描述 |
onblur | 元素失去焦点是触发 |
onchange | 该事件在表单元素的内容是触发（<input>,<keygen>,<select>和<textarea>） |
onfocus | 元素获取焦点是触发 |
onfocusin | 元素即将获取焦点是触发 |
onfocusout | 元素即将失去焦点是触发 |
oninput | 元素获取用户输入时触发 |
onresert | 表单重置是触发 |
onsearch | 用户向搜索域输入文本是触发（<input="search">） |
onselect | 用户选取文本时触发（<input>和<textarea>） |
onsubmit | 表单提交时触发 |
常用的表单事件有onchange事件、onsubmit事件、onblur事件和onfocus事件。
1. onchange事件：
1). onchange 事件会在域的内容改变时发生。
2). onchange 事件也可用于单选框与复选框改变后触发的事件。
onchange事件的触发步骤：
1). 当input的获得焦点的时候，系统储存当前值
2). 当input失去焦点的时候，判断当前值是否和之前的储存值相同，如果不同则触发onchange事件。（非IE浏览器可以通过回车来判断）
举例：当输入框中的内容改变时，将输入的小写字母转换成大写字母。
代码如下：
<form>输入需要转换的字符串<input type="text" id="input" onchange="func()"></form>
<p>当输入框失去焦点的时候，函数被触发，小写字母转换成大写字母</p>
<script>
function func(){
var x=document.getElementById("input");
console.log(x.value);
x.value=x.value.toUpperCase();
console.log(x.value);
}
</script>
效果：
说明：如果只是输入内容，并没有按回车键或者离开输入框，onchange不会触发。
2. onsubmit事件
1). onsubmit 属性只在 <form> 表单中使用。
2). onsubmit事件是当表单提交时进行相关js操作的一个事件。
3). onsubmit 事件会在表单中的确认按钮被点击时发生。
当该事件触发的函数中返回false时，表单就不会被提交。
语法：
onsubmit="return 函数名()"
举例：事件触发的函数返回false，看页面会不会跳转。
代码如下：
<form action="http://www.qianduandaxue.com" onsubmit="return func()">
<input type="text" >
<input type="submit" value="提交">
</form>
<script>
function func() {
alert("触发onsubmit事件");
return false;
}
</script>
效果：
说明：
如果需要页面跳转的话，只需要将返回值改为true就可以了，当返回值是false时，表单不会被提交。
3. onfocus事件和onblur事件
onfocus 事件在对象获得焦点时发生。onblur事件刚好相反，在对象失去焦点时发生。
举例：当输入框获得焦点的时候改变输入框的颜色，当输入框失去焦点的时候验证内容是否为空，并把输入框的颜色改成白色。
代码如下：
<form>
<input id="input" type="text" onfocus="func(this)" onblur="check(this)">
</form>
<script>
function func(x) {
x.style.backgroundColor ="yellow";
}
function check(x){
x.style.backgroundColor ="#fff"
if(x.value==""){
alert("内容不能为空");
}
}
</script>
效果：
说明：
onblur 经常用于Javascript验证代码，一般用于表单输入框。
onfocus 通常用于 <input>, <select>, 和<a>。
总结：
表单的事件有很多，常用的有onchange事件、onsubmit事件、onblur事件和onfocus事件。
注：本文来自 http://www.qianduandaxue.com/ 前端大学网整理编辑，更多资料，文章请点击“阅读原文”查看。欢迎评论提问投稿交流建议哦。
本文分享自微信公众号 - 全栈学习笔记（gh_c3e2aff7d73e）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。