Question

如果您访问this site，则可以看到Senha输入的类型为text。但是当我输入内容时，它会变为Password。

当我点击它时，它会保持我的输入并将其类型保持为Password。

但如果没有文字我点击，则会恢复为text。

你能解释一下我如何轻松实现这样的目标吗？从用户体验的角度来看，这是非常好的。

我正在使用最新版本的jQuery。

Answer 1

最简单的方法是使用HTML5 placeholder text。但是，当在某些浏览器中应用于密码字段时，这可能会有一些非预期的渲染，甚至在IE9之前的IE中根本不起作用。因此，对于跨浏览器的一致性，我会使用jQuery插件：

http://plugins.jquery.com/project/html5placeholder

然后你几乎不需要做任何事情。在您的HTML中，您将设置一个常规密码文本字段，但使用占位符，如下所示：

<input type="password" placeholder="Senha">

在javascript中（包括上面的jQuery插件之后），你可以激活它：

$('input').placeholder();

但是，如果您想使用传统方法（或者如果上述方法由于某种原因不适合您），您可以根据需要将密码字段替换为纯文本字段。您可以像这样设置HTML，并显示可见的提示和隐藏的实际字段：

<input id="password-field" type="password" name="password" style="display: none;">
<input id="password-prompt" type="text" value="Senha">

然后，jquery将其换掉：

// This makes the password field show up when you focus on the prompt,
// and changes focus to the password field
$('#password-prompt').focus(function() {
    $(this).hide();
    $('#password-field').show().focus();
});

// This makes the prompt re-appear when you lose focus on the password field,
// but only if it's still empty (if you typed anything in, it leaves it as is)
$('#password-field').blur(function() {
    if ($(this).val() == '') {
        $(this).hide();
        $('#password-prompt').show();
    }
});

Answer 2

浏览器安全性不允许您直接更改输入类型。但是，您可以使用replaceWith将输入替换为密码类型：

$("#input1").replaceWith($("<input>").attr({ "type" : "password", "id" : "input1" }));

测试它确实有效。这是jsFiddle。

Answer 3

以下适用于iOS Safari：

$(function() {
    $('#tb').keypress(function() {
        $(this).prop('type', 'password');
    }).blur(function() {
        if ($(this).val() === '')
            $(this).prop('type', 'text');
    });
});

jsFiddle：http://jsfiddle.net/unwJh/5/

它可以在任何其他浏览器中使用吗？

Answer 4

您需要替换元素，例如：

http://jsfiddle.net/YEHFe/

如何将输入从文本更改为密码，反之亦然？

4 个答案: