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