用JS来实现输入框提示文字点击时消失

在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的，这个就是“文本框点击时文字消失，失去焦点时文字出现”这个效果；这个效果用个JS就可以完成，这个效果是做网站的人必备的JS代码；自己会写JS的写写也快，不会写的就需要代码收集以作备用，用到的时候就方便多了。

下面就是这个效果实现用到的JS代码：

程序代码 
  1. <script language="JavaScript" type="text/javascript">  
  2.    function addListener(element,e,fn){      
  3.         if(element.addEventListener){      
  4.              element.addEventListener(e,fn,false);      
  5.          } else {      
  6.              element.attachEvent("on" + e,fn);      
  7.           }      
  8.    }  
  9.    var myinput = document.getElementById("myinput");  
  10.    addListener(myinput,"click",function(){  
  11.     myinput.value = "";  
  12.    })  
  13.    addListener(myinput,"blur",function(){  
  14.     myinput.value = "请输入您的ID";  
  15.    })  
  16. </script>   

只要把这段代码保存成一个JS文件就可以的，在网页里做好引用就OK，轻松的完成这个给不会程序的人看起来很难的效果。

Html代码 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="Content-Type" content="text/html; charsetGB2312" />  
  5.   <title>文本框点击时文字消失，失去焦点时文字出现</title>  
  6.     
  7.  </head>  
  8.  <body>  
  9.   <input type="text" value="请输入您的ID" id="myinput" />  
  10.  </body>  
  11. </html>  
  12. <script language="JavaScript" type="text/javascript">  
  13.    function addListener(element,e,fn){      
  14.         if(element.addEventListener){      
  15.              element.addEventListener(e,fn,false);      
  16.          } else {      
  17.              element.attachEvent("on" + e,fn);      
  18.           }      
  19.    }  
  20.    var myinput = document.getElementById("myinput");  
  21.    addListener(myinput,"click",function(){  
  22.     myinput.value = "";  
  23.    })  
  24.    addListener(myinput,"blur",function(){  
  25.     myinput.value = "请输入您的ID";  
  26.    })  
  27. </script>  

 

posted @ 2012-07-20 10:50  leejersey  阅读(10066)  评论(1)  编辑  收藏  举报