求助模仿雅虎邮箱登录效果的实现方法

我使用<input name="pwd" type="text" id="pwd" value="请输入密码">，在页面一打开的时候就默认的在密码输入框内显示“请输入密码”，当我鼠标点进密码输入框后，我想实现密码输入框的type="password"的效果，请问有什么办法可以实现？多谢

解决方案 »

  1.   

    效果是一开始是显示“请输入密码”，鼠标点进去后“请输入密码”消失，再输入的都是*，即将原来的输入框的type="text"换成type="password"，但是type属性是readonly的，无法修改，我尝试用
    var test1 = document.getElementById("pwd");
    test1.removeNode(true);
    先删除这个密码输入框元素，再新建一个type="password"的输入框，
    var objInput = document.createElement("input");
    objInput.name = "name";
    objInput.type = "password";
    objInput.id = "name";
    document.body.appendChild(objInput);
    但是这样做提交表单form的时候新建的输入框不在这个表单里面，就快找到解决办法了，可就是不成功，可能是思路的问题，请问大家还有什么更好的办法没有？
      

  2.   

    <HTML>
      <HEAD>
        <Script Language = "JavaScript" >
         function check(obj)
     {
    obj.value = 'password';
    obj.type = 'password';
     }
     </Script>
    </HEAD> <BODY>
       <center>
         <form name = "myform">
       
       <input type="text" id="txt1" name="txt1" value="请输入密码" onfocus="check(this);"/>
       
      </form>
        </center>
     </BODY>
    </HTML>
      

  3.   

    上面的代码在FF中通过，在IE中通不过，呵呵，可能需要用到YUI的资源，因为YUI对各浏览器之间的兼容做的不错
      

  4.   

    帮你搞定了
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
         function check(){
      var form1 = document.getElementById("myform");
    var test1 = document.getElementById("pwd"); 
    form1.removeChild(test1); 
    var objInput = document.createElement("input"); 
    objInput.name = "name"; 
    objInput.type = "password"; 
    objInput.id = "name"; 
    form1.appendChild(objInput); 
     }
    </script>
    </head>
    <body>
    <center>
          <form id="myform">
        <input type="text" id="pwd" name="txt1" value="请输入密码" onfocus="check();"/>
       </form>
         </center>
    </body>
    </html>
      

  5.   

    页面无法正常显示中文，尝试了各种办法，修改server.xml、在jsp页面中加gb2312的代码都无法正常显示，都快崩溃了
      

  6.   

    用不了这么复杂,一条路走不通换条走走啊。..
     <input type="text" id="txt1" name="txt1" value="请输入密码" onfocus="change(this);"/>
     <input type="password" id="txt2" name="txt2" value="" style="display:none"/>
     <script>
    function change(){
    var txt1=document.getElementById("txt1");
    var txt2=document.getElementById("txt2");
    txt1.style.display="none";
    txt2.style.display="";
    txt2.focus();
    }
     </script>刚才随便写了下,也没怎么测试,不过肯定可以的.....
      

  7.   

    晕死，CSDN现在怎么搞得给分都给不了了啊？在什么地方给分呢？
      

  8.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
            <title>Untitled Document</title>
            <script type="text/javascript">
                 function check(){
                     var form1 = document.getElementById("myform");
                    var test1 = document.getElementById("pwd"); 
                    form1.removeChild(test1); 
                    var objInput = document.createElement("input"); 
                    objInput.name = "name"; 
                    objInput.type = "password"; 
                    objInput.id = "name"; 
                    form1.appendChild(objInput); 
                 }
            </script>
        </head>
        <body>
            <center>
                 <form id="myform">
                       <input type="text" id="pwd" name="txt1" value="请输入密码" onfocus="check();"/>
                  </form>
            </center>
        </body>
    </html>