求助一个输入框的JS


<body>
<form action="" method="post">
<table border="1">
<tr>
<td>标题:</td>
<td><input type="text"  name="title"/></td>
</tr>
<tr>
<td>简要标题</td>
<td><input type="text"  name="title"/></td>
</tr>
<tr>
<td>内容:</td>
<td><textarea name="content" rows="3" cols="30"></textarea></td>
</tr>
<tr>
<td colspan="2"><input type="submit"  name="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>假如上面这样的一个表单，当我把鼠标放在"标题文本框"内时，在文本框对应的后面就提示“请输入文章标题！”,
当我把鼠标放在"简要标题"对应的文本框时，在文本框后面就提示请输入“简要标题！”；
当我把鼠标放在"内容"对应的文本框时，在文本框后面就提示请输入“文章内容！”
这样的js怎么写，谢谢，我不会写，因为我对js不熟悉！

解决方案 »

  1.   

    <script type="text/javascript"> 
    function doit(n){
    document.getElementById("p_" + n).style.display = "inline";
    }
    function hide(n){
    document.getElementById("p_" + n).style.display = "none";
    }</script> <body>
    <form action="" method="post">
    <table border="1">
    <tr>
    <td>标题:</td>
    <td><input type="text" name="title" onfocus="doit(0)"  onblur="hide(0)"/><span id="p_0" style="display:none;">请输入文章标题！</span></td>
    </tr>
    <tr>
    <td>简要标题</td>
    <td><input type="text" name="title" onfocus="doit(1)" onblur="hide(1)"/><span id="p_1" style="display:none;">请输入“简要标题！” </span></td>
    </tr>
    <tr>
    <td>内容:</td>
    <td><textarea name="content" rows="3" cols="30" onfocus="doit(2)" onblur="hide(2)"></textarea><span id="p_2" style="display:none;">请输入“文章内容！” </span></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit"  name="submit" value="提交"/></td>
    </tr>
    </table>
    </form>
    </body>
      

  2.   


    <HTML><HEAD>
    <TITLE>test</TITLE>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
    <script language=javascript> 
    function addStr(val){
    var div=document.getElementById("str"+val);
    if(val==1){
    div.innerText="请输入标题";
     }else if(val==2){
    div.innerText="请输入“简要标题！";
     }else{
    div.innerText="请输入“文章内容！";
     }

    }
    </script>
    </head>
    <body>
    <form action="" method="post" ID="Form1">
    <table border="1" ID="Table1">
    <tr>
    <td>标题:</td>
    <td><input type="text"  name="title" ID="Text1" onfocus="addStr(1)"/></td>
    <td id=str1></td>
    </tr>
    <tr>
    <td>简要标题</td>
    <td><input type="text"  name="title" ID="Text2" onfocus="addStr(2)"/></td>
    <td id=str2></td>
    </tr>
    <tr>
    <td>内容:</td>
    <td><textarea name="content" rows="3" cols="30" ID="Textarea1" onfocus="addStr3(3)"></textarea></td>
    <td id="str3"></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit"  name="submit" value="提交" ID="Submit1"/></td>
    </tr>
    </table></form>
    </body>
    </html>
      

  3.   

    我试了一下楼上的代码,果然好用,学习了.我开始喜欢JavaScript了,学习!
      

  4.   

    有点错,重来个
    <HTML><HEAD>
    <TITLE>test</TITLE>
    <meta http-equiv=content-type content="text/html; charset=UTF-8">
    <script language=javascript> 
    function addStr(val){
    for(var i=1;i<=3;i++){
    eval('var div'+i+'=document.getElementById("str'+i+'")');
    eval('div'+i+'.innerText=" "');
    }
    if(val==1){
    div1.innerText="请输入标题";
     }else if(val==2){
    div2.innerText="请输入“简要标题！";
     }else{
    div3.innerText="请输入“文章内容！";
     }

    }
    </script>
    </head>
    <body>
    <form action="" method="post" ID="Form1">
    <table border="1" ID="Table1">
    <tr>
    <td>标题:</td>
    <td><input type="text"  name="title" ID="Text1" onfocus="addStr(1)"/></td>
    <td id=str1></td>
    </tr>
    <tr>
    <td>简要标题</td>
    <td><input type="text"  name="title" ID="Text2" onfocus="addStr(2)"/></td>
    <td id=str2></td>
    </tr>
    <tr>
    <td>内容:</td>
    <td><textarea name="content" rows="3" cols="30" ID="Textarea1" onfocus="addStr(3)"></textarea></td>
    <td id="str3"></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit"  name="submit" value="提交" ID="Submit1"/></td>
    </tr>
    </table></form>
    </body>
    </html>
      

  5.   

    <html>
    <head>
    <script>
    function dow1()
    {
    document.getElementById("a1").innerText="请输入文章标题！";
    }
    function dow2()
    {
    document.getElementById("a2").innerText="请输入简要标题！";
    }
    function dow3()
    {
    document.getElementById("a3").innerText="请输入文章内容！";
    }
    </script>
    </head>
    <body>
    <form action="" method="post">
    <table border="1">
    <tr>
    <td>标题:</td>
    <td><input id="a1" type="text"  name="title" onclick="dow1()"/></td>
    </tr>
    <tr>
    <td>简要标题</td>
    <td><input id="a2" type="text"  name="title" onclick="dow2()"/></td>
    </tr>
    <tr>
    <td>内容:</td>
    <td><textarea id="a3" name="content" rows="3" cols="30" onclick="dow3()"></textarea></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit"  name="submit" value="提交"/></td>
    </tr>
    </table>
    </form>
    </body>
    </html>给你写了个简单的，看看是不是你想要的，有什么错误的地方，可以提出
      

  6.   

    <html>
    <head>
    <script>
    function dow1()
    {
    if(document.getElementById("a1").value =="")
    {
    document.getElementById("a1").innerText="请输入文章标题！";
    return false;
    }
    }
    function dow2()
    {
    if(document.getElementById("a2").value =="")
    {
    document.getElementById("a2").innerText="请输入简要标题！";
    return false;
    }
    }
    function dow3()
    {
    if(document.getElementById("a3").value =="")
    {
    document.getElementById("a3").innerText="请输入文章内容！";
    return false;
    }
    }
    </script>
    </head>
    <body>
    <form action="" method="post">
    <table border="1">
    <tr>
    <td>标题:</td>
    <td><input id="a1" type="text"  name="title" onclick="dow1()"/></td>
    </tr>
    <tr>
    <td>简要标题</td>
    <td><input id="a2" type="text"  name="title" onclick="dow2()"/></td>
    </tr>
    <tr>
    <td>内容:</td>
    <td><textarea id="a3" name="content" rows="3" cols="30" onclick="dow3()"></textarea></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit"  name="submit" value="提交"/></td>
    </tr>
    </table>
    </form>
    </body>
    </html>和上面方法一样，只是多做了一个文本是否为空判断！