本文经授权转载自公众“前端大学”
表单事件有:
属性 | 描述 |
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)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。