JavaScript搜索框提示文本
通常搜索框里面都有一定的提示文本，下面就通过代码实例介绍一下如何用原生javascript实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
input{color:red}
</style>
<script type="text/javascript">
function iniEvent(){
var txtSearch=document.getElementById("txtSearch");
txtSearch.onfocus=function(){
if(this.value=="请输入关键字" || this.value==""){
this.value="";
this.style.color="black";
}
}
txtSearch.onblur=function(){
if(this.value=="请输入关键字" || this.value==""){
this.value="请输入关键字";
this.style.color="red";
}
}
}
window.onload=function(){
iniEvent();
}
</script>
</head>
<body>
<input type="text" id="txtSearch" value="请输入关键字"/>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.function iniEvent(){}，此方法实现了此功能。
（2）.var txtSearch=document.getElementById("txtSearch")，获取文本框元素对象。
（3）.txtSearch.onfocus=function(){
if(this.value=="请输入关键字" || this.value==""){
this.value="";
this.style.color="black";
}
}为文本框注册onfocus事件处理函数。
如果当前文本框的value值等于"请输入关键字"的时候或者值等于空的时候，就把文本框内容清空，其实第二个条件可以省略。
并且将字体颜色设置为黑色。
（4）.txtSearch.onblur=function(){
if(this.value=="请输入关键字" || this.value==""){
this.value="请输入关键字";
this.style.color="red";
}
else{
this.style.color="black";
}
}，为文本框注册onblur事件处理函数。
如果文本框的内容为"请输入关键字"（这个可以省略）或者空的话，就将文本框的值设置为"请输入关键字"。
否则的话将字体颜色设置为黑色。
二.相关阅读:
（1）.onfocus事件可以参阅javascript focus事件一章节。
（2）.onblur事件可以参阅javascript blur事件一章节。