要点:
1. .onfocus事件是光标聚集响应的事件 .onblur是焦点失去事件
2. 注意光标聚焦时,将提示内容去掉,并将字体的前景色改为黑色,和用户输入颜色上作区分,在改回提示内容时,将前景色改为灰色
html和内置的js代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" value="请输入搜索内容" id="text">
<script type="text/javascript">
function my$(id){
return document.getElementById(id);
}
my$("text").onfocus=function(){
if (this.value=="请输入搜索内容") {
this.value="";
this.style.color="black";
}
// 判断焦点聚集时,如果内容为请输入搜索内容,将提示内容
// 清除并且将文本内容的前景色改为黑色
}
my$("text").onblur=function(){
if(this.value==""){
this.value="请输入搜索内容";
this.style.color="gray";
}
// 当失去焦点时,判断搜索框内部是不是空,如果为空就是点击了
// 但是没有点击搜索,就还原原来的状态
}
// 同时,这个案例思路可以将前面写的一个事件控制div的显示与隐藏改变一下
// 同时,判断是否输入了搜索内容,可以用 this.value.length == 0 代替,因为这样速度更快
</script>
</body>
</html>
效果: