如何在 JQuery 中将输入文本字段交换为焦点上的密码区域？

Question

我想在密码区域中将“密码”显示为文本，当聚焦时，该框应该变为空，并允许用户输入普通密码（加星号）。

目前我使用以下方法。 最初我显示一个显示密码的文本字段，当聚焦时它被删除并替换为密码字段。 这是 jQuery：

$(document).ready(function() {
    $("#password").focus( function() {
        $("#pwd").html('<input type="password" id="password" name="password" value="" />');
        $("#password").focus();
    });
});

这适用于 Firefox 和 Chrome，但在 IE 8（可能还有其他 IE）中失败，因为焦点调用由于某种原因失败（也许 DOM 还没有准备好？）。

jsbin上提供了一个演示。

有任何想法吗？

Answer 1

你可以试试水印插件。 我不知道它是否适用于IE8。

Answer 2

在意识到我原来的解决方案行不通之后，出于好奇，我花了一段时间试图想出一个可行的解决方案。 我仍然建议使用推荐的 jQuery 插件eKek0 ，因为它会更好地降级。

以下示例相当灵活。 不是将替换<input />标签硬编码为字符串，而是从原始标签派生替换标签。 如果更改了<input />标签属性，这会有所帮助，因为您不会丢失给标签的任何样式或其他属性。

以下方案已经在Chrome、Firefox、IE8、IE8 IE7兼容模式下测试。

$(document).ready(function() { 

    var focusEvent = function() { 
        if(this.type == 'text') {
            var html = $(this).clone().wrap('<span></span>').parent().html();
            html = html.replace(/type=("|')?text("|')?/, 'type="password"');
            var $newPwdBx = $(html);      

            $(this).replaceWith($newPwdBx);
            $newPwdBx.removeClass('readOnly');
            $newPwdBx.val('');
            $newPwdBx.focus();
            $newPwdBx.blur(blurEvent);
        }
    };

    var blurEvent = function() { 
        if(this.value == '') { 
            var html = $(this).clone().wrap('<span></span>').parent().html();
            html = html.replace(/type=("|')?password("|')?/, 'type="text"');
            var $newTxtBx = $(html);            

            $(this).replaceWith($newTxtBx);
            $newTxtBx.addClass('readOnly');
            $newTxtBx.val('password');
            $newTxtBx.focus(focusEvent);
        } 
    };

    $("#password").focus(focusEvent); 
});

此代码将<input />替换为适当的模糊和聚焦类型。 它还添加/删除了 class 用于设置“密码”占位符文本的样式，因此它更有用，因为占位符“密码”文本不是默认的黑色，这可能会误导用户。

你可以在这里看到它的工作： http://jsbin.com/azugu

Answer 3

我做过类似的事情。 如果您打算使用 javascript，这是一种方法：

• 有两个输入字段，一个普通字段和一个密码字段
• 密码隐藏css
• 当普通输入获得焦点时
  • 隐藏普通输入
  • 显示密码输入
  • 将焦点放在密码输入上

这种方法有一些问题需要考虑。 如果有人禁用了 javascript，或者正在使用 Firefox 的 NoScript 扩展，他们可能无法提交表单。 如果有人在加载 javascript 之前开始键入，可能会出现意外结果。

另一种方法是使用 css 并将 javascript 作为备份（用于 IE6）。 创建一个包含文本“密码”的图像。 将该图像作为密码字段的背景图像。 您可以使用css中的伪类来更改hover和密码字段的背景。 这样，如果一个人有 javascript 禁用，该表格仍然有效。 它也可以在加载 css 后立即运行。

CSS 可能看起来像这样：

.pass { 
    background-image: url(/path/to/img.png);
}
.pass:hover {
    background: white;
}

使用 jquery javascript 可能看起来像这样：

 $( ".pass" ).hover( function() {
     $( this ).css( "background", "white" );
  };

Answer 4

实现此目的的最常见方法是使用文本“密码”为密码字段设置背景图像，并在获得焦点时删除背景图像。

Answer 5

为什么不直接更改属性并清除值呢？

$("#password").focus( function() {
    $(this).attr('type','password');
    $(this).attr('value','');        
});

Answer 6

试试这个，如果你愿意的话，通过实验：

$(document).ready(function() {
    $(".pass").focus(function() {
        $pwInput = $('<input type="password" class="pass" name="password" value="" />');
        $(this).remove();
        $("#someDiv").append($pwInput);
    }).focus();
});

Answer 7

你为什么不在顶部放一个div？

var $pwd = $("#passwordBox"),
    pos = $pwd.position()
;
$pwd
    .after(  // add the div
        $('<div></div>')
            .html("Password")
            .css({
                position : "absolute",    // place it over this
                top : pos.top + "px",  // adjust as necessary
                left : pos.top + "px"
            })
    )
    .next() // select the new div
    .andSelf()
    .one('click focus', function() {
        $pwd.next().remove()    // remove the div
            .end().focus() // focus the input box
        ;
    })
;

Answer 8

这适用于 FF 和 IE：

$(document).ready(function() {
    $("#password").focus( function() {
        $(this)
          .after('<input type="password" id="password" name="password" value="" />')
          .remove();
        $("#password").focus();
    });
});

Answer 9

还有这个由 Simone Lippolis 制作的txReplaceFormPassword插件。