Here is a method which uses an image next to the password field to toggle between seeing the password (text input) and not seeing it (password input). I use an "open eye" and "closed eye" image, but you can use whatever suits you. The way it works is having two inputs/images and upon clicking the image, the value is copied from the visible input to the hidden one, and then their visibility is swapped. Unlike many of the other answers which use hardcoded names, this one is general enough to use it multiple times on a page. It also degrades gracefully if JavaScript is unavailable.

这是其中两个在一页上的样子。在这个例子中，密码a是通过点击它的眼睛来显示的。

$(document).ready(function() { $('img.eye').show(); $('span.pnt').on('click', 'img', function() { var self = $(this); var myinp = self.prev(); var myspan = self.parent(); var mypnt = myspan.parent(); var otspan = mypnt.children().not(myspan); var otinp = otspan.children().first(); otinp.val(myinp.val()); myspan.hide(); otspan.show(); }); }); img.eye { vertical-align: middle; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form> <b>Password-A:</b> <span class="pnt"> <span> <input type="password" name="passa"> <img src="eye-open.png" class="eye" alt="O" style="display:none"> </span> <span style="display:none"> <input type="text"> <img src="eye-closed.png" class="eye" alt="*"> </span> </span> </form> <form> <b>Password-B:</b> <span class="pnt"> <span> <input type="password" name="passb"> <img src="eye-open.png" class="eye" alt="O" style="display:none"> </span> <span style="display:none"> <input type="text"> <img src="eye-closed.png" class="eye" alt="*"> </span> </span> </form>

我在尝试在Firefox 5中执行此操作时收到了相同的错误消息。

我用下面的代码解决了这个问题:

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

要使用它，只需设置你的字段的onFocus和onBlur属性如下所示:

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

我也将此用于用户名字段，因此它将切换为默认值。只需将函数的第二个参数设置为“当您调用它时”。

同样值得注意的是，我的密码字段的默认类型实际上是密码，以防用户没有启用javascript或出现错误，这样他们的密码仍然受到保护。

美元(文档)。ready函数是jQuery，当文档加载完成时加载。然后将密码字段更改为文本字段。显然，你必须将“password_field_id”更改为密码字段的id。

请随意使用和修改代码!

希望这能帮助到每个和我有同样问题的人:)

——肯特

编辑: 很好的解决方案，但不是绝对的。在FF8和IE8上工作，但不完全在Chrome上(16.0.912.75版本)。Chrome浏览器在页面加载时不显示密码文本。 另外，当自动填充开启时，FF将显示您的密码。

这是所有IE8爱好者的又一个选择，在新浏览器上也能完美运行。您可以只给文本上色以匹配输入的背景。如果你有一个单一的字段，当你点击/聚焦在该字段上时，这将改变颜色为黑色。我不会在公共站点上使用这个，因为它会“迷惑”大多数人，但我在一个只有一个人可以访问用户密码的ADMIN部分中使用它。

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-OR-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

这也是需要的，当您离开字段时，将文本更改为白色。简单，简单，简单。

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[另一选择] 现在，如果你有几个字段，你正在检查，都有相同的ID，因为我正在使用它，添加一个类的“pass”字段，你想隐藏的文本。设置密码字段类型为“text”。这样，只有类为“pass”的字段才会被更改。

<input type="text" class="pass" id="inp_2" value="snoogle"/>

$('[id^=inp_]').click(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#000000');
    }
    // rest of code
});

这是第二部分。这将在您离开字段后将文本更改为白色。

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

下面是允许您更改文档中元素类型的一小段代码。

jquery.type.js (GitHub Gist)

var rtype = /^(?:button|input)$/i;

jQuery.attrHooks.type.set = function(elem, value) {
    // We can't allow the type property to be changed (since it causes problems in IE)
    if (rtype.test(elem.nodeName) && elem.parentNode) {
        // jQuery.error( "type property can't be changed" );

        // JB: Or ... can it!?
        var $el = $(elem);
        var insertionFn = 'after';
        var $insertionPoint = $el.prev();
        if (!$insertionPoint.length) {
            insertionFn = 'prepend';
            $insertionPoint = $el.parent();
        }

        $el.detach().attr('type', value);
        $insertionPoint[insertionFn]($el);
        return value;

    } else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
        // Setting the type on a radio button after the value resets the value in IE6-9
        // Reset value to it's default in case type is set after value
        // This is for element creation
        var val = elem.value;
        elem.setAttribute("type", value);
        if (val) {
            elem.value = val;
        }
        return value;
    }
}

它通过从文档中删除输入、更改类型然后将其放回原来的位置来解决这个问题。

请注意，这段代码只针对WebKit浏览器进行了测试——对其他任何浏览器都不能保证!

这对我很有用。

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

简单:

this.type = 'password';

如

$("#password").click(function(){
    this.type = 'password';
});

这是假设您的输入字段事先设置为“text”。