为文本框输入设置占位符[type="password"]答案

【问题标题】：Setup place-holder for the text-box input[type=" password"]为文本框输入设置占位符[type="password"]
【发布时间】：2012-12-21 04:43:51
【问题描述】：

我正在尝试为具有 input[type="password"] 的文本框显示占位符文本（输入密码）。现在我正在尝试将 input[type="password"] 更改为 input[type="text"] 以显示占位符，如果用户单击文本框我再次将 input[type="text"] 更改为 input[type="password"]。这里它不起作用，请检查脚本
我的jsfiddle is here

 function setupPasswordPlaceholder(thisEl)
    {
        if('' !== thisEl.attr("alt"))
        {
            if('' === thisEl.val())
            {
                thisEl.val(thisEl.attr("alt"));
                thisEl.removeAttr("type");
                thisEl.attr('type','text');
                thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'});
            }
            thisEl.focus(function()
            {        
                if(thisEl.val() == thisEl.attr("alt")) 
                {
                    thisEl.val("");
                    thisEl.removeAttr("type");
                    thisEl.attr('type','password');
                    thisEl.css({'color': '#18A505','font-size': '10pt','font-weight':'normal'});
                }

        });

        thisEl.focusout(function()
        {        
            if('' === thisEl.val()) 
            {
                thisEl.val(thisEl.attr("alt"));
                thisEl.removeAttr("type");
                thisEl.attr('type','text');
                thisEl.css({'font-weight':'normal','font-size':'10pt','color':'#999','font-family': '"lucida grande", tahoma, verdana, arial, sans-serif'});
            }
        });
    }
}



$("input[type='password']").each(function(){
        setupPasswordPlaceholder($(this));
});

【问题讨论】：

HTML5 为输入框添加了占位符属性。这对您来说不是一个适当的解决方案吗？ <input type="password" placeholder="Enter Password" />
对不起，我用的是html4，这里没有选项，ie6，ie7不支持html5
在尝试更改输入元素的类型属性时，DOM 不是很友好。上次我玩这个时，它只有在从 DOM 中分离元素、更改属性然后重新附加它时才成功。充其量只是一个黑客攻击。
jsfiddle.net/f5fYc
http://jsfiddle.net/9HagB/6/

标签： javascript jquery

【解决方案1】：

一个简单的代码更改可能适用于大多数浏览器（当然 IE6 除外）。您正在使用 removeAttr 然后设置属性“类型”的属性，而不是使用这一行：

替换：

  thisEl.removeAttr("type");
  thisEl.attr('type','text');

与：

  thisEl.get(0).type = type;

查看您更新的小提琴http://jsfiddle.net/9HagB/7/

【讨论】：

【解决方案2】：

这是一个Fiddle

HTML：

    <input style="display: none; " id="fakepasscode" type="password" autocomplete="off">
    <input style="display: inline;" id="passcode" hint="password" type="text" autocomplete="off">

JavaScript：

var clearField = function() {
    if ($("#passcode").val() != "password") {
        $("#passcode").val("");
    }
}

var resetField = function() {
    if ($("#passcode").val().length == 0) $("#passcode").val("password");
}


var pwdFocus = function() {
    $("#passcode").hide();
    $("#fakepasscode").val("");
    $("#fakepasscode").show();
    $("#fakepasscode").focus();
}

var pwdBlur = function() {
    if ($("#fakepasscode").val() == "") {
        $("#fakepasscode").hide();
        $("#passcode").show();
    }
}

var setupHintField = function() {
    $("#passcode").unbind("focus blur change");
    $("#passcode").focus(function() {
        clearField();
    });
    $("#passcode").blur(function() {
        resetField();
    });
    $("#passcode").change(function() {
        resetField();
    });
    $("#passcode").show();
    $("#fakepasscode").hide();
}


$(document).ready(function() {
    $("#passcode").val($("#passcode").attr("hint"));
    setupHintField();
    $("#passcode").unbind("focus");
    $("#passcode").focus(function() {
        pwdFocus();
    });
    $("#fakepasscode").blur(function() {
        pwdBlur();
    });
});

【讨论】：

【解决方案3】：

我见过的常见解决方案是使用标签或其他输入框在IE中显示“占位符”文本。

请看这个出色的答案：https://stackoverflow.com/a/7225820/988355

【讨论】：