【JavaScript】onchange 与 oninput 事件的区别

最新推荐文章于 2023-10-29 10:21:54 发布

亮子AI

最新推荐文章于 2023-10-29 10:21:54 发布

阅读量710

点赞数

分类专栏： Javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/henryhu712/article/details/125941915

版权

Javascript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

oninput 事件适用于以下标签：

<input type=”password”>
<input type=”search”>
<input type=”text”> 
<textarea>

oninput 与 onchange 事件的区别：

onchange事件在输入框失去焦点时触发；oninput在输入框内容发生改变时立即触发，因此用户每输入或删除一个字符都会触发该事件。
onchange还适用于select标签。

oninput事件处理实例：

<!DOCTYPE html>
<html>
	<head>
		<title>oninput attribute</title>
		<style>
			body {
				text-align:center;
			}
			h1 {
				color:green;
			}
		</style>
	</head>
	<body>
		<h1>GeeksforGeeks</h1>
		<h2>oninput Attribute</h2>
		Enter some Text here: <input type="text" id="GFG"
		oninput="Geeks()">
		<p id="sudo"></p>


		<script>
			function Geeks() {
				var x = document.getElementById("GFG").value;
				document.getElementById("sudo").innerHTML =
				"Entered Text: " + x;
			}
		</script>
	</body>
</html>