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事件一章节。

回复

我来回复
  • 暂无回复内容