<!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>
jQuery的获取焦点和失去焦点事件
最新推荐文章于 2022-10-15 11:35:19 发布