经常在网站会看到类似这样的特效,下面采用jQuery实现下。
思路很简单,用户名输入框获取焦点时判断是否为默认值,如果是则清空否则不清空。该输入框失去焦点时判断输入内容是否为空串或空格,如果是则清空否则不清空。
注:仅仅是个人思路。网站未必是采用这种方式实现的。
<form action="" method="post">
<table id="tb">
<tr>
<td>用户名</td>
<td>
<input type="text" value="输入用户名" name="user" id="user"/>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="pwd" id="pwd"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登陆"/>
</td>
</tr>
</table>
</form>
css代码:
<style type="text/css">
#tb{
width: 400px;
}
#user{
color:gray;
}
</style>
脚本:
$().ready(function()
{
var defaultValue = $("#user").val();
$("#user").focus(function()//获取焦点时
{
$("#user").css("color","black");
if($("#user").val() == defaultValue)
$("#user").val("");
});
$("#user").blur(function()//失去焦点时
{
if($.trim($("#user").val())=="")
{
$("#user").val(defaultValue);
$("#user").css("color","gray");
}
});
});
别忘了加上jquery开发框架:
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
缺陷:如果输入内容恰好是默认值则当输入框失去焦点时内容会清空。