占位符适用于使用此 javascript 的 IE/Firefox 中的文本而非密码框答案

【问题标题】：placeholder works for text but not password box in IE/Firefox using this javascript占位符适用于使用此 javascript 的 IE/Firefox 中的文本而非密码框
【发布时间】：2011-07-12 14:27:00
【问题描述】：

Js 文件

//Modified from http://www.beyondstandards.com/archives/input-placeholders/
function activatePlaceholders()
{
    var detect = navigator.userAgent.toLowerCase(); 
    if (detect.indexOf("safari") > 0) return false;
    var inputs = document.getElementsByTagName("input");
    for (var i=0;i<inputs.length;i++)
    {
        if (inputs[i].getAttribute("type") == "text")
        {
            var placeholder = inputs[i].getAttribute("placeholder");
            if (placeholder.length > 0)
            {
                inputs[i].value = placeholder;
                inputs[i].onclick = function()
                {
                    if (this.value == this.getAttribute("placeholder"))
                    {
                        this.value = "";
                    }
                    return false;
                }
                inputs[i].onblur = function()
                {
                    if (this.value.length < 1)
                    {
                        this.value = this.getAttribute("placeholder");
                    }
                }
            }
        }
        else if (inputs[i].getAttribute("type") == "password")
        {
            var placeholder = inputs[i].getAttribute("placeholder");
            if (placeholder.length > 0)
            {
                inputs[i].value = placeholder;
                inputs[i].onclick = function()
                {
                    if (this.value == this.getAttribute("placeholder"))
                    {
                        this.value = "";
                    }
                    return false;
                }
                inputs[i].onblur = function()
                {
                    if (this.value.length < 1)
                    {
                        this.value = this.getAttribute("placeholder");
                    }
                }
            }
        }
    }
}
window.onload = function()
{
    activatePlaceholders();
}

HTML部分

<form name="input" action="login.php" method="post">
        <table width="*" border="0">
        <tr>
        <td align="left"><input type="text" name="username" placeholder="Username" />&nbsp;<input type="password" name="pass" placeholder="Password" /><input type="submit" value="Login" /></td>
        </tr>
        <tr>
        <td colspan="2" align="right">Stay logged in:&nbsp;<input type="checkbox" name="remember" value="1">&nbsp;&nbsp;Sign Up | Forgot Password&nbsp;&nbsp;&nbsp;</td>
        </tr>
        </table>
        </form>

这适用于输入框。不适用于密码框。它想在密码上标出占位符文本。我希望用户密码开始，但不是占位符。不知道如何解决这个问题，以便它在 IE 和 Firefox 中运行。

【问题讨论】：

标签： javascript

【解决方案1】：

var passwords = document.getElementsByTagName("password");

应该是：

var passwords = document.getElementsByTagName("input");

因为它是 <input type="password"> 而不是 <password...>。但是，在这种情况下，我认为这对您没有帮助，因为当您设置密码的值时，您将看到的只是黑点/星号。

【讨论】：

谢谢...现在我遇到了另一个问题。它想在占位符上标出密码...。我希望它标出用户密码，而不是占位符“密码”。尝试使用占位符，所以我不会让 UI 变得更可爱。