jQuery的获取焦点和失去焦点事件

最新推荐文章于 2022-10-15 11:35:19 发布

我叫阿狸猫

最新推荐文章于 2022-10-15 11:35:19 发布

阅读量2.1k

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/world_java/article/details/9668725

版权

Jquery 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<style type="text/css">
		.myClass{
			color:#c0c0c0
		}
	</style>
  <script type="text/javascript" src="../js/jquery-1.10.2.js"></script></head>
  <body>
	<table border="1" align="center">
		<tr>
			<th>用户名</th>
			<td>
				<input type="text" value="输入用户名"/>
			</td>
		</tr>
	</table>
	<script type="text/javascript">
		//为input元素添加样式
		$("input").first().addClass("myClass");
		//为input元素添加获取焦点事件
		$("input").first().focus(function(){
			if ($(this).val() == "输入用户名") {
				$(this).val("");
			}
			//删除原样式
			$(this).removeClass("myClass");
		});
		//失去焦点事件
		$("input").first().blur(function(){
			if($(this).val().length==0){
				$(this).val("输入用户名");
				$(this).addClass("myClass");
			}
		});
	</script>	
  </body>
</html>