关于js html 文本框问题，求教 求教！！！！

想做一个类似淘宝的搜索框，就是点击上面的不同文字，文本框出现相应的说明，然后点击文本框，里面的字消失。输入内容后，再次点击，里面的字不消失了，还有就是，本来的字是灰色的，自己输入的字是黑色的。
 我的代码：
<script language="JavaScript" type="text/javascript">  
function input(sname){
 if(sname=="sale"){
 document.getElementById("text").value="输入书名或ISBN找到你要卖的书登记即可。";
 document.getElementById("sale").style.background="url(images/imc-04.gif)";
  document.getElementById("borrow").style.background="";
   document.getElementById("buy").style.background="";
  }
else if(sname=='borrow'){
  document.getElementById("text").value="输入书名或ISBN找到你要jie书登记即可!";
  document.getElementById("sale").style.background="";
  document.getElementById("borrow").style.background="url(images/imc-04.gif)";
   document.getElementById("buy").style.background="";
  }
else if(sname=='buy'){
  document.getElementById("text").value="输入书名或ISBN找到你要mai书登记即可!";
  document.getElementById("sale").style.background="";
  document.getElementById("borrow").style.background="";
   document.getElementById("buy").style.background="url(images/imc-04.gif)";
  } 
}
</javascript>
<body>
<div id="menu">
    <a href="#" class="png" id="sale"  onclick="input('sale')" style="background:url(images/imc-04.gif)"><img src="images/sale.png"></a>
             <a href="#" class="png" id="borrow" onclick="input('borrow')"><img src="images/borrow.png"></a>
                  <a href="#" class="png" id="buy" onclick="input('buy')"><img src="images/buy.png"></a> </div><div id="search">
<form>
    <input type="text" class="text" id="text" value="输入书名或ISBN找到你要卖的书登记即可。" onFocus="if(value==defaultValue){value='';}" onBlur="if(!value){value=defaultValue;}" /></form>
</body>这个只能在点sale这个链接的时候 消失文字，其他的不行，自己输入的字也不会变黑色。（代码不全，主要就是这个样字）
请教高手了！！！

解决方案 »

  1.   


    <!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>
        <title></title>    <script language="JavaScript" type="text/javascript">
            var userInputText='';
            var defaultSaleTxt = "输入书名或ISBN找到你要卖的书登记即可。";
            var defaultBorrowTxt = "输入书名或ISBN找到你要jie书登记即可!";
            var defaultBuyTxt = "输入书名或ISBN找到你要mai书登记即可!";        function input(sname) {
                if (sname == "sale") {
                    if (userInputText.length > 0) {
                        document.getElementById("text").value = userInputText;
                    }
                    else {
                        document.getElementById("text").value = defaultSaleTxt;             
                    }
                    document.getElementById("sale").style.background = "url(images/imc-04.gif)";
                    document.getElementById("borrow").style.background = "";
                    document.getElementById("buy").style.background = "";
                }
                else if (sname == 'borrow') {
                    if (userInputText.length > 0) {
                        document.getElementById("text").value = userInputText;
                    }
                    else {
                        document.getElementById("text").value = defaultBorrowTxt;
                    }
                    document.getElementById("sale").style.background = "";
                    document.getElementById("borrow").style.background = "url(images/imc-04.gif)";
                    document.getElementById("buy").style.background = "";
                }
                else if (sname == 'buy') {
                    if (userInputText.length > 0) {
                        document.getElementById("text").value = userInputText;
                    }
                    else {
                        document.getElementById("text").value = defaultBuyTxt;
                    }
                    document.getElementById("sale").style.background = "";
                    document.getElementById("borrow").style.background = "";
                    document.getElementById("buy").style.background = "url(images/imc-04.gif)";
                }
            }
        </script>    <style type="text/css">
            .text
            {
                color: gray;
                font-size: 11px;
                font-style: oblique;
            }
            .searchText
            {
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <a href="#" class="png" id="sale" onclick="input('sale')" style="background: url(images/imc-04.gif)">Sale</a> 
            <a href="#" class="png" id="borrow" onclick="input('borrow')">Borrow</a>
            <a href="#" class="png" id="buy" onclick="input('buy')">Buy</a>
        </div>
        <div id="search">
            <form>
            <input type="text" class="text" id="text" value="输入书名或ISBN找到你要卖的书登记即可。" onfocus="if(value==defaultValue){value='';this.className='searchText';userInputText='';}else{this.className='searchText';userInputText=value;}"
                onblur="if(!value){value=defaultValue;this.className='text';userInputText='';}else{this.className='searchText';userInputText=value;}" /></form>
    </body>
    </html>
      

  2.   


    第一次点击之后字是消失了，但是点了borrow 和 buy 后，再点input 字不消失的啊，而且都变黑了。还是不懂呜呜呜
      

  3.   

    FF不可以，IE可行。是为什么？表示很好奇
      

  4.   

    直接使用 title  然后 格式化一下 
      

  5.   


    //layer demo
    var layer={
    inint:function (){},
    seashowtip: function(tips,flag,iwidth){
    var my_tips=document.all.mytips;
    e=window.event || event;
    var mouseX=e.pageX || e.clientX;
    var mouseY=e.pageY || e.clientY;
    if(flag){
        my_tips.innerHTML=tips;
        my_tips.style.display="";
        my_tips.style.width=iwidth;
        my_tips.style.left=mouseX+10+document.body.scrollLeft;
        my_tips.style.top=mouseY+10+document.body.scrollTop;
       }
    else 
      {
       my_tips.style.display="none";
       }
    }//onmousemove=seashowtip(this.tips,1,150) onmouseout=seashowtip(this.tips,0,150)
    }
    <input name="demo" type="text"  size="15" tips="请输入内容" onmousemove=seashowtip(this.tips,1,100) onmouseout=seashowtip(this.tips,0,100)/ >
      

  6.   

    打彪了  <input name="demo" type="text"  size="15" tips="请输入内容" onmousemove= layer.seashowtip(this.tips,1,100) onmouseout= layer.seashowtip(this.tips,0,100)/ >
      

  7.   


    <!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>
        <title></title>    <script language="JavaScript" type="text/javascript">
            var userInputText='';
            var info = {
                   defaultSaleTxt : "输入书名或ISBN找到你要卖的书登记即可。",
                   defaultBorrowTxt : "输入书名或ISBN找到你要jie书登记即可!",
                   defaultBuyTxt : "输入书名或ISBN找到你要mai书登记即可!"
                };
            var $ = function(id){return document.getElementById(id)};
            function input(sname) {
                var input = $("text");
                if (sname == "sale") {
                    $("sale").style.background = "url(images/imc-04.gif)";
                    $("borrow").style.background = "";
                    $("buy").style.background = "";
                }
                else if (sname == 'borrow') {
                    $("sale").style.background = "";
                    $("borrow").style.background = "url(images/imc-04.gif)";
                    $("buy").style.background = "";
                }
                else if (sname == 'buy') {
                    $("sale").style.background = "";
                    $("borrow").style.background = "";
                    $("buy").style.background = "url(images/imc-04.gif)";
                }
                sname = sname.replace(sname.charAt(0),sname.charAt(0).toUpperCase());
                var textStr = info["default" + sname + "Txt"];
                if (userInputText.length > 0) {
                    input.value = userInputText;
                }
                else {
                    input.value = textStr;             
                }
                input.onfocus = function(){
                    if(this.value==textStr){
                      this.value='';
                      this.className='searchText';
                      userInputText='';
                    }else{
                      this.className='searchText';
                      userInputText=this.value;
                    }
                };
                input.onblur = function (){
                   if(!this.value){
                      this.value=textStr;
                      this.className='text';
                      userInputText='';
                   }else{
                      this.className='searchText';
                      userInputText=this.value;
                   }
                };
            }
            window.onload = function(){
               input("sale");
            };
        </script>    <style type="text/css">
            .text
            {
                color: gray;
                font-size: 11px;
                font-style: oblique;
            }
            .searchText
            {
                font-size: 11px;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <a href="#" class="png" id="sale" onclick="input('sale')" style="background: url(images/imc-04.gif)">Sale</a> 
            <a href="#" class="png" id="borrow" onclick="input('borrow')">Borrow</a>
            <a href="#" class="png" id="buy" onclick="input('buy')">Buy</a>
        </div>
        <div id="search">
            <form>
            <input type="text" class="text" id="text" size="50" /></form>
    </body>
    </html>楼主这样行吗？