本文经授权转载自公众“前端大学”

表单事件有:

属性

描述

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>

效果:

每天学点JS之--表单事件总结-LMLPHP

说明:如果只是输入内容,并没有按回车键或者离开输入框,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> 

效果:

 

每天学点JS之--表单事件总结-LMLPHP

每天学点JS之--表单事件总结-LMLPHP

说明:

如果需要页面跳转的话,只需要将返回值改为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>

效果:

每天学点JS之--表单事件总结-LMLPHP

说明: 

onblur 经常用于Javascript验证代码,一般用于表单输入框。

onfocus 通常用于 <input>, <select>, 和<a>。

总结:

表单的事件有很多,常用的有onchange事件、onsubmit事件、onblur事件和onfocus事件。 





注:本文来自 http://www.qianduandaxue.com/ 前端大学网整理编辑,更多资料,文章请点击“阅读原文”查看。欢迎评论提问投稿交流建议哦。

每天学点JS之--表单事件总结-LMLPHP

本文分享自微信公众号 - 全栈学习笔记(gh_c3e2aff7d73e)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

03-29 23:58
查看更多