input框内默认文字点击消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function addLoadEvent(func){
 var oldonload = window.onload;
 if(typeof window.onload!= 'function' ){
   window.onload = func;
 }
 else{
  window.onload = function(){
  oldonload();
  func();
  }
 }
}
var inputtext = function(){
 var inputs = document.getElementsByTagName('INPUT');
 for(var i=0; i<inputs.length; i++){
  var str = "gray_input";
  if(str.indexOf(inputs[i].className)==-1) continue;
  var element = inputs[i];
  element.onfocus = function() {
     if (this.value == this.defaultValue) {
        this.value = "";
     this.className = "gray_input2";
    }
     }
       element.onblur = function() {
       if (this.value == "") {
          this.value = this.defaultValue;
     this.className = "gray_input";
          }
        }
 }
}

addLoadEvent(inputtext);
</script>
<style>
.gray_input{color:#878787;}
.gray_input2{color:#444;}
</style>
</head>

<body>
<input name="text2" type="text" id="main_search3" class="gray_input" value="搜一下问题来回答"/>
</body>
</html>
posted on 2013-12-06 11:34 小码农_ZXB 阅读(444) 评论(0) 编辑收藏举报