請問如何用jQ去寫類似密碼框placeholder的效果

如果使用HTML5 我們可以這麼去寫
<input type="password" placeholder="請輸入密碼" />
但是有些老的瀏覽器不兼容type="text"的我用jq寫得出來 但是pwd的話寫進去 全部都是星號“***”
請問該怎麼辦PS 我自己想到的方法是 密碼框裡面沒有輸入東西的時候 默認是txt類型 當有東西輸入 立即切換回去pwd的
但是貌似這個寫起來 不太現實

解决方案 »

  1.   


    <html>
    <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.8.0.js"></script>
    </head>
    <body>
    <input type="text" value="请输入用户名" id="txtUserName" name="txtUserName" />
    </body>
    <script type="text/javascript">
    $(function(){
    $("#txtUserName").focus(function(){
    if($(this).val()==="请输入用户名")
    {
    $(this).val("");
    }
    }).blur(function(){
    if($(this).val()==="")
    {
    $(this).val("请输入用户名");
    }
    });
    });
    </script>
    </html>一点小代码，没有加入样式
      

  2.   

    PS 我自己想到的方法是 密碼框裡面沒有輸入東西的時候 默認是txt類型 當有東西輸入 立即切換回去pwd的
    但是貌似這個寫起來 不太現實
    这个还真的不行
      

  3.   


    對於text框我就是這麼寫的 但是pwd真的寫不了 老變成***
    變換type貌似真的不行 我又寫了一個 無法實現
      

  4.   


    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
        var pwd = $("#pwd");
    var password = $("#password");
    pwd.focus(function(){
    pwd.hide();
    password.show().focus();
    });

    password.focusout(function(){
    if(password.val().trim() === ""){
    password.hide();
    pwd.show();
    }
    });
    });
    </script>
    <input type="text" id="pwd" value="请输入密码"/><input type="password" id="password" style="display:none;"/>
    用两个框来相互替换，input的type为只读属性，所以我们没有办法去修改他……
      

  5.   


    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
        var pwd = $("#pwd");
    var password = $("#password");
    pwd.focus(function(){
    pwd.hide();
    password.show().focus();
    });

    password.focusout(function(){
    if(password.val().trim() === ""){
    password.hide();
    pwd.show();
    }
    });
    });
    </script>
    <input type="text" id="pwd" value="请输入密码"/><input type="password" id="password" style="display:none;"/>
    用两个框来相互替换，input的type为只读属性，所以我们没有办法去修改他……
      

  6.   


    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
        var pwd = $("#pwd");
    var password = $("#password");
    pwd.focus(function(){
    pwd.hide();
    password.show().focus();
    });

    password.focusout(function(){
    if(password.val().trim() === ""){
    password.hide();
    pwd.show();
    }
    });
    });
    </script>
    <input type="text" id="pwd" value="请输入密码"/><input type="password" id="password" style="display:none;"/>
    用两个框来相互替换，input的type为只读属性，所以我们没有办法去修改他……
      

  7.   


    多謝
    這個方法可以了 不過還是個小細節沒有搞定 我自己再補上
    那就是在focus的時候 如果框內沒有輸入內容 框裡面的“請輸入密碼”不會清除
    相反的 當刪掉密碼後 “請輸入密碼”也會出現