HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....

最新推荐文章于 2024-05-18 15:28:02 发布

brains丶小白

最新推荐文章于 2024-05-18 15:28:02 发布

阅读量6.4k

点赞数 2

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/Yxd0724/article/details/126656620

版权

表单事件简介

onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
oninput 元素获取用户输入时触发
onchange 该事件在表单元素的内容改变时触发
onsearch 用户向搜索域输入文本时触发 ( <input type="search">)
onselect 用户选取文本时触发 ( <input> 和 <textarea>)
onreset 表单重置时触发
onsubmit 表单提交时触发

提示：以上几个焦点事件触发的时机可以理解为一个简单的生命周期，都会触发，但有先后顺序。

onfocus 获取焦点事件

定义和用法：onfocus 事件在对象获得焦点时发生。
onfocus 通常用于 <input>, <select>, 和<a>
提示： onfocus 事件的相反事件为 onblur 事件。

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onfocus 获取焦点事件</title>
	</head>
	<head>
		<script>
			function myFunction(x) {
				x.style.background = "yellow";
			}
		</script>
	</head>
	<body>
		输入你的名字: <input type="text" onfocus="myFunction(this)">
		<p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
	</body>
</html>

onblur 失去焦点事件

定义和用法：onblur 事件会在对象失去焦点时发生。
onblur 经常用于Javascript验证代码，一般用于表单输入框

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onblur 失去焦点事件</title>
		<script>
			function myFunction() {
				var x = document.getElementById("fname");
				alert("您输入了：" + x.value)
				x.value = x.value.toUpperCase();
			}
		</script>
	</head>
	<body>
		输入你的名字: <input type="text" id="fname" onblur="myFunction()">
		<p>当你离开输入框, 函数将被触发将输入文字转换成大写。</p>
	</body>
</html>

onfocusin 即将获取焦点事件

定义和用法：onfocusin 事件在一个元素即将获得焦点时触发。
提示： onfocusin 事件类似于 onfocus 事件。主要的区别是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用 onfocusin 事件。
提示：虽然 Firefox 浏览器不支持 onfocusin 事件，但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否获取焦点。
提示： onfocusin 事件的相反事件是 onfocusout 事件
注意：Firefox 浏览器不支持 onfocusout 事件。

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onfocusin 即将获取焦点</title>
	</head>
	<body>
		输入您的名字: <input type="text" onfocusin="myFunction(this)">
		<p>当 input 输入框获取焦点时，JavaScript 函数将被触发，并修改背景颜色。 </p>
		<script>
			function myFunction(x) {
				x.style.background = "yellow";
			}
		</script>
	</body>
</html>

onfocusout 即将失去焦点事件

定义和用法：onfocusout 事件在元素即将失去焦点时触发。
提示： onfocusout 事件类似于 onblur 事件。主要的区别是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否获取焦点，需要使用 onfocusout 事件。
提示：虽然 Firefox 不支持 onfocusout 事件，但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否失去焦点。
提示： onfocusout 事件的相反事件为 onfocusin 事件。
注意：Firefox 浏览器不支持 onfocusout 事件。

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onfocusout 即将失去焦点</title>
	</head>
	<body>
		输入您的名字： <input type="text" id="fname" onfocusout="myFunction()">
		<p>当你离开 input 输入框时，JavaScript函数将被触发，并将输入框中的小写字母转为大写。</p>
		<script>
			function myFunction() {
				var x = document.getElementById("fname");
				x.value = x.value.toUpperCase();
			}
		</script>
	</body>
</html>

oninput 输入事件

定义和用法：oninput 事件在用户输入时触发。
该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
提示：该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>oninput 输入事件</title>
	</head>
	<body>
		<p>在文本框中尝试输入触发函数。</p>
		<input type="text" id="myInput" oninput="myFunction()">
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x = document.getElementById("myInput").value;
				document.getElementById("demo").innerHTML = "你输入的是: " + x;
			}
		</script>
	</body>
</html>

onchange 内容改变事件

定义和用法：onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onchange 内容改变事件</title>
	</head>
	<body>
		输入你的名字: <input type="text" id="fname" onchange="myFunction()">
		<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
		<script>
			function myFunction() {
				var x = document.getElementById("fname");
				x.value = x.value.toUpperCase();
			}
		</script>
	</body>
</html>

onselect 选取文本事件

定义和用法：onselect 事件会在文本框中的文本被选中时发生

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onchange 选取文本事件</title>
	</head>
	<body>
		一些文本: <input type="text" value="Hello world!" onselect="myFunction()">
		<script>
			function myFunction() {
				alert("你选中了一些文本");
			}
		</script>
	</body>
</html>

onreset 表单重置事件和onsubmit 表单提交事件

定义和用法：onreset 事件在表单被重置后触发；onsubmit 事件在表单提交时触发

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onreset and onsubmit</title>
	</head>
	<body>
		<p>当表单被重置后，触发函数并弹出提示信息。</p>
		<form  action="demo-form.php" onsubmit="submitFunction()" onreset="resetFunction()">
			输入您的名字: <input type="text">
			<input type="reset" value="重置">
			<input type="submit" value="提交">
		</form>
		<script>
			function resetFunction() {
				alert("表单已重置");
			}
			function submitFunction() {
			    alert("表单已提交");
			}
		</script>
	</body>
</html>

onsearch 向搜索框输入事件

定义和用法：onsearch 事件在用户按下"ENTER（回车）" 按键或点击 type=“search” 的 <input> 元素的 “x(搜索)” 按钮时触发。
注意：Internet Explorer, Firefox 或 Opera 12 及其更早版本不支持 onsearch 事件。

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onsearch 向搜索框输入事件</title>
	</head>
	<body>
		<p>在搜索文本域中输入信息并按下 "ENTER" 键。</p>
		<input type="search" id="myInput" onsearch="myFunction()">
		<p id="demo"></p>
		<script>
			function myFunction() {
				var x = document.getElementById("myInput");
				document.getElementById("demo").innerHTML = "您搜索的内容为：" + x.value;
			}
		</script>
	</body>
</html>

brains丶小白

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
HTML表单事件，获取焦点时、失去焦点时、即将获取焦点时、即将失去焦点时、输入值时、选取文本时、表单元素的内容改变时、提交时....

input>提示：以上几个焦点事件触发的时机可以理解为一个简单的生命周期，都会触发，但有先后顺序。
复制链接

扫一扫