<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击隐藏文字</title>
<style>
input{
150px;
height: 16px;
color: #ccc;
font-size: 12px;
}
</style>
<script>
// 首先分析事件逻辑：
// 1.点击表单,默认字消失,并有光标显示；
// 2.输入要搜索的字，字体变深；
// 3.当清空输入的字，光标消失，默认字再次出现。
window.onload = function () {
function $(id) {
return document.getElementById(id)
}
//获取ID函数
$("bdan").onfocus = function fn() {
// 获取焦点用onfocus事件。下面，用if语句判断条件是否成立。
// 当用户没有在表单输入的时候，也就是表单里面是默认字的时候，
// 清空value值，然后改变字体颜色。
if($("bdan").value == "请输入..."){
// 注意用“==”号，表示等于，单等号意思是赋值。
$("bdan").value = "";
// 清空表单默认字
$("bdan").style.color = "#333";
// 改变字体颜色
}
}
$("bdan").onblur = function fn() {
// 失去焦点用“onblur”事件
if($("bdan").value == ""){
$("bdan").value = "请输入...";
// 恢复默认字
$("bdan").style.color = "#ccc";
// 恢复字体颜色
}
}
}
</script>
</head>
<body>
<input type="text" value="请输入..."id="bdan"/><button id="btn">查找</button>
</body>
</html>