用jquery怎么实现点击密码输入框,上面的提示文字“请输入密码”消失,失去焦点时候提示文字又存在

没有获取焦点的时候:

获取了焦点的时候:

如果是用户名,我直接通过jquery控制input框的value值,但是密码框的type是password,是黑点,用这个方法就不行了,新手求助,谢谢。

方法1.对于支持placeholder属性的浏览器。可以暂且认为除了老版本的IE系列浏览器都支持这个属性。可以直接在input标签上附加属性,如下:

<input type="password" name="pwd" placeholder="请输入密码" />

方法2.对于不支持placeholder属性的浏览器,使用一个相对定位的元素,使其偏移,浮在输入框上方。当用户点击这个偏移元素,或输入框获得焦点时,隐藏这个偏移元素,来模拟placeholder的效果。

温馨提示:内容为网友见解,仅供参考
第1个回答  2014-09-16
    <input type="text" id="pwd" />
    <input type="hidden" id="pwdvalue" />

    <script type="text/javascript">
        var pwd = document.getElementById("pwd");
        var pwdvalue = document.getElementById("pwdvalue");

        pwd.onkeypress = function() {
            var code = arguments[0].keyCode
            pwdvalue.value += String.fromCharCode(code);
            arguments[0].returnValue = false;
            pwd.value += "x";
        }
    </script>

第2个回答  推荐于2017-09-29
<input type="text" id="pwds" />

$("input#pwds").on('blur', function(){
    var obj = $(this);
    obj.attr('type', 'text').val('密码');
}).on('focus', function(){
    var obj = $(this);
    obj.attr('type', 'password').val('');
});

本回答被提问者采纳
第3个回答  2014-09-16
只要在密码框的input 获得焦点时触发,当获得焦点时,控制value的同时,改变type属性,把type属性置为password 应该就行了,
第4个回答  2014-09-16
仅供参考

<html>
<head>
<script src="./jquery-1.9.1/jquery-1.9.1.min.js"></script>
<script>
$(function() {
var pwd = $("#pwd");
pwd.attr("type","text");
pwd.bind("focus",function() {
pwd.attr("type","password");
pwd.attr("value","");
});

pwd.bind("blur",function() {
var pwdtext = pwd.val();
if(pwdtext.length === 0){
pwd.attr("type","text");
pwd.attr("value","密码");
}
});
});
</script>
</head>
<body>
<form>
<input id="pwd" type="password" value="密码">登录
</form>
</body>
</html>
相似回答