要做一个效果如图所示的表单
<form action="">
<filedset>
<legend>个人基本信息</legend>
<div>
<label for="username">用户名：</label>
<input id="username" type="text" value="昵称">
</div>
<div>
<label for="psd">登录密码：</label>
<input id="psd" type="text" value="密码">
</div>
<div>
<label for="msg">座右铭</label>
<textarea name="" id="msg" cols="30" rows="5">详细信息</textarea>
</div>
</filedset>
</form>
fieldset 和legend是HTML5里的语法，配套使用的,label 里的for属性值，和哪个元素的id值一样，就表示点击的时候，会触发哪个元素的事件
现在，当获取焦点的时候，让我们给输入框加上样式，失去焦点时，去掉样式。样式写在class里，这样就可以用addClass就能获取到了
<script>
$(":input").on("focus",function(){
$(this).addClass("focus");
}).on("blur",function(){
$(this).removeClass("focus");
})
</script>
现在，假设我们在文本框里啥也不写，当获取焦点的时候，输入框里原来的文本就清空，当失去焦点时，文本又出现
- 获取input输入框的value属性值的方法是val()
- defaultValue 能获得文本框里的默认内容
<script>
$(":input").on("focus",function(){
$(this).addClass("focus").val("");
}).on("blur",function(){
$(this).removeClass("focus").val(this.defaultValue);
})
</script>
如果我们在输入框里啥也不写的话，那当失去焦点的时候文本框显示默认值完全OK，but我们肯定是要往输入框里写东西的，如果我们在文本框里写东西了，那么失去焦点的时候，就不能显示默认值，而是我们刚才输入的东东
<script>
$(":input").on("focus",function(){
$(this).addClass("focus").val("");
}).on("blur",function(){
$(this).removeClass("focus");
if(!$(this).val()){
$(this).val(this.defaultValue);
}
})
现在，我们还应该注意的是，当获取焦点的时候，应该判断一下，如果此时文本框里面的值是默认值那我们就清空，但是如果不是默认值而是我们上一次写进去的值，那就不能清空
<script>
$(":input").on("focus",function(){
$(this).addClass("focus");
if(this.value == this.defaultValue){
this.value = "";
}
}).on("blur",function(){
$(this).removeClass("focus");
if(!$(this).val()){
$(this).val(this.defaultValue);
}
})
</script>
综上，全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习1</title>
<script src="jquery-3.3.1.js"></script>
<style>
.focus{
background:#00ffff;
border: 1px solid #ffff00;
}
</style>
</head>
<body>
<form action="">
<filedset>
<legend>个人基本信息</legend>
<div>
<label for="username">用户名：</label>
<input id="username" type="text" value="昵称">
</div>
<div>
<label for="psd">登录密码：</label>
<input id="psd" type="password" value="密码">
</div>
<div>
<label for="msg">座右铭</label>
<textarea name="" id="msg" cols="30" rows="5">详细信息</textarea>
</div>
</filedset>
</form>
<script>
$(":input").on("focus",function(){
$(this).addClass("focus");
if(this.value == this.defaultValue){
this.value = "";
}
}).on("blur",function(){
$(this).removeClass("focus");
if(!$(this).val()){
$(this).val(this.defaultValue);
}
})
</script>
</body>
</html>