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

您可以尝试使用watermarker插件。我不知道它是否适用于IE8。

Answer 2

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

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

以下解决方案已在IE7兼容模式下在Chrome，Firefox，IE8和IE8中进行了测试。

$(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 />。它还添加/删除了一个用于设置“密码”占位符文本样式的类，因此它更有用，因为占位符“密码”文本不是默认的黑色，这可能会误导用户。

您可以在此处看到它：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

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

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＆amp; 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插件。

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

9 个答案: