onblur失焦事件及实际应用例子

最新推荐文章于 2024-08-15 19:07:35 发布

原创最新推荐文章于 2024-08-15 19:07:35 发布 · 864 阅读

0 ·

CC 4.0 BY-SA版权

笔记同时被 3 个专栏收录

16 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

ajax

5 篇文章

订阅专栏

本文介绍了HTML中的onblur事件，详细阐述了该事件在网页交互中的作用，通过实例展示了如何使用onblur事件来实现元素失去焦点时的特定功能，为前端开发提供了实用的参考。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/common.js"></script>
	</head>

	<body>
		<script>
		//uname失去焦点时 uname值显示在div  onblur事件
			function showUname() {
				$("show").innerHTML = $("uname").value;
			}
		</script>

		<div id="show"></div>
		<input type="text" id="uname" onblur="showUname()"/>

	</body>

</html>

应用：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/common.js"></script>
	</head>

	<body>
		<script>
		//uname失去焦点时 uname值显示在div  onblur事件
			function showUname() {
				if($("uname").value==""){
					$("show").innerHTML = "用户名不能为空";
				}else{
					$("show").innerHTML = "通过验证";
				}
				
			}
		</script>

		用户名：<input type="text" id="uname" onblur="showUname()"/>
		     <span id="show"></span>
	</body>

</html>