101_表单事件

最新推荐文章于 2025-06-06 09:17:29 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-06-06 09:17:29 发布

阅读量838

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript学习文章标签： javascript ecmascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/121192414

JavaScript学习专栏收录该内容

105 篇文章

订阅专栏

本文详细介绍了HTML和JavaScript中onfocus、onblur、onchange、oninput、onselect和onreset/onsubmit事件的用法、示例及区别，涵盖了输入框、下拉选择、文本区域等元素的焦点切换与内容变化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. onfocus事件

1.1. onfocus事件在对象获得焦点时发生。

1.2. onfocus通常用于<input>, <select>和<textarea>。

1.3. onfocus事件的相反事件为onblur事件。

1.4. 语法

1.4.1. html中:

<element onfocus="SomeJavaScriptCode">

1.4.2. JavaScript中:

object.onfocus=function(){SomeJavaScriptCode}

2. onblur事件

2.1. onblur事件会在对象失去焦点时发生。

2.2. onblur通常用于<input>, <select>和<textarea>。

2.3. 语法

2.3.1. html中:

<element onblur="SomeJavaScriptCode">

2.3.2. JavaScript中:

object.onblur=function(){SomeJavaScriptCode};

3. onchange事件

3.1. onchange事件会在域的内容改变时发生。

3.2. onchange通常用于<input>, <select>和<textarea>。应用于<select>似乎最合适。

3.3. 语法

3.3.1. html中:

<element onchange="SomeJavaScriptCode">

3.3.2. JavaScript中:

object.onchange=function(){SomeJavaScriptCode};

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>onfocus、onblur和onchange事件</title>
	</head>
	<body>
		用户名: <input type="text" name="userName" onfocus="userNameInputFocus(event)" onblur="userNameInputBlur(event)" />
		<br /><br />
		户籍: <select name="address" onchange="addressSelectChange(event, this)">
				<option value="洛阳" selected ="selected ">洛阳</option>
				<option value="濮阳">濮阳</option>
				<option value="南阳">南阳</option>
				<option value="信阳">信阳</option>
				<option value="安阳">安阳</option>
				<option value="郑州">郑州</option>
			</select> <br /><br />
		简介: <textarea name="info" rows="10" cols="30"></textarea>

		<script type="text/javascript">
			function userNameInputFocus(e){
				console.log('用户名输入框获取焦点');
			}

			function userNameInputBlur(e){
				console.log('用户名输入框失去焦点');
			}

			function addressSelectChange(e, obj){
				console.log('用户选择的地址: ' + obj.value);
			}
		</script>
	</body>
</html>

4.2. 效果图

5. oninput事件

5.1. oninput事件在用户输入时触发。

5.2. 该事件在<input>或<textarea>元素的值发生改变时触发。

5.3. 该事件类似于onchange事件。不同之处在于oninput事件在元素值发生变化是立即触发, onchange在元素失去焦点时触发。另外一点不同是onchange事件也可以作用于<keygen>和<select>元素。

5.4. 语法

5.4.1. html中:

<element oninput="myScript">

5.4.2. JavaScript中:

object.oninput=function(){myScript};

6. onselect事件

6.1. onselect事件会在文本框中的文本被选中时发生。

6.2. onselect属性可用于: <input type="file">, <input type="password">, <input type="text">, <keygen>和<textarea>。

6.3. 语法

6.3.1. html中:

<element onselect="SomeJavaScriptCode">

6.3.2. JavaScript中:

object.onselect=function(){SomeJavaScriptCode}

7. onreset事件

7.1. onreset事件在表单被重置后触发。

7.2. onreset事件应用于<form>元素。

7.3. 语法

7.3.1. html中:

<element onreset="myScript">

7.3.2. JavaScript中:

object.onreset=function(){myScript};

8. onsubmit事件

8.1. onsubmit事件在表单提交时触发。

8.2. onsubmit事件应用于<form>元素。

8.3. 语法

8.3.1. html中:

<element onsubmit="myScript">

8.3.2. JavaScript中:

object.onsubmit=function(){myScript};

9. 例子

9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>oninput、onselect、onreset和onsubmit事件</title>
	</head>
	<body>
		<!-- onsubmit的return不能省略, 否则return false的时候不能阻止表单提交 -->
		<form onreset="myReset(event)" onsubmit="return mySubmit(event)">
			用户名: <input type="text" name="uName" value="请输入用户名" onselect="userNameOnselect(event, this)" /> <br /><br />
			简介: <textarea name="info" rows="10" cols="30" oninput="infoOninput(event, this)"></textarea> <br /><br />
			<input type="reset" value="重置" /> <input type="submit" value="提交" />
		</form>

		<script type="text/javascript">
			function userNameOnselect(e, obj){
				console.log('用户选中的值: ' + obj.value);
			}

			function infoOninput(e, obj){
				console.log('用户输入简介: ' + obj.value);
			}

			function myReset(e){
				console.log('用户名重置数据');
			}

			function mySubmit(e){
				console.log('用户名提交数据');
				return false;
			}
		</script>
	</body>
</html>

9.2. 效果图