jQuery中实现账号的水印效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.box {
border: 1px solid #aaccff;
padding: 10px;
margin: 10px;
}
</style>
<script src="Script/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#Text1").val("请输入用户名").css("color", "#ACACAC");//窗体加载时给文本框添加字体
$("#Text1").focus(function () {
if ($(this).val() == "请输入用户名")//判断文本框的值
$("#Text1").val("");
}).blur(function () {
if ($(this).val().length == 0) {
$(this).val("请输入用户名");
}
});
$("#Text2").val("请输入密码");
$("#Text2").focus(function () {
if ($(this).val() == "请输入密码")
$(this).val("");
}).blur(function () {
if ($(this).val().length == 0) {
$(this).val("请输入密码");
}
});
})
</script>
</head>
<body>
<div class="box">
<dl>
<dt>作业要求：实现账号的水印效果</dt>
<dd>
<ol>
<li>初始状态显示：请输入用户名；字体颜色#ACACAC</li>
<li>获取光标时：如果文本框中的内容为“请输入用户名”，那么清空文本</li>
<li>获取光标时：如果文本框中的内容不为“请输入用户名”，那么显示原文本</li>
<li>失去光标时：如果文本框中的内容为空，那么显示“请输入用户名”</li>
<li>失去光标时：如果文本框中的内容不为空，那么显示原文本</li>
</ol>
</dd>
</dl>
</div>
<div class="box">
<form id="form1">
<div>
<fieldset>
<legend>用户登录</legend>
<div>账号：</div>
<div>
<input id="Text1" type="text" onfocus="focusEffect();" onblur="blurEffect();" />
</div>
<div>密码：</div>
<div>
<input id="Text2" type="password" />
</div>
<div>
<input type="checkbox" />下次自动登录</div>
<div>
<input id="Button1" type="submit" value="登录" />
</div>
</fieldset>
</div>
</form>
</div>
</body>
</html>
