Question

我为当前名为insidelabel（）的项目编写了这个非常简单的函数，让我为输入中的输入字段添加描述（标签）。

//Label inside of inputfields
function insidelabel(selector, name) {
    $(selector).val(name);
    $(selector).css({'color':'#999'});

    $(selector).focus(function () {
        //Input Value
        if ($(this).val() == name) { $(this).val(''); }
        $(this).css({'color':'#000'})
    });

    $(selector).blur(function () {
        if ($(this).val() == '') { $(this).val(name); }
        if ($(this).val() == name) {
            $(this).css({'color':'#999'});
        }
    });
}

insidelabel('.t', 'name');
insidelabel('.p', 'enter password');

因此，当输入被聚焦时，文本消失，当它模糊时，它再次具有相同的文本。

<form method="get" action="">
    <input type="text" class="t" value="" /><br/>
    <input type="password" class="p" value="" />
</form>

但是现在我想知道如何扩展该功能以在密码字段中加上标签！听起来很奇怪......说明：我想要一个密码字段（type="password"），在其中有一个可读标签（如“输入密码”）。一旦用户输入文本，密码应该是不可读的（点线）。我知道，这个解释真的很糟糕，但我想你可能会明白我的意思。

我想知道最好的方法是什么？我应该查询输入字段是否为type="password"，如果是，我将其设置为type="text" - 输入文本后，我再次将其设置回type="password"。知道什么是最好的解决方案吗？

以下是我的示例：http://jsfiddle.net/R8Zxu/

Answer 1

如果您使用位于（透明）<label>下的真实<input>而不是使用value属性（具有一些主要的可访问性含义）伪装它，那么您可以执行以下操作：{{3 }}

请勿尝试更改现有输入的类型。 Internet Explorer不会让你。

Answer 2

确定适用于网络应用程序，但是如果您想在iPhone应用程序上使用页面，那么它无法正常运行，正确答案请参阅此处 - http://blog.stannard.net.au/2011/01/07/creating-a-form-with-labels-inside-text-fields-using-jquery/

Answer 3

是的，那将是正确的方法。这在文本字段中称为“水印”，并且由于密码输入字段使用不同的文本显示机制，因此当水印处于活动状态时，您可能希望将其切换为文本类型。 OnFocus，您可以将其切换出来（如果需要），将焦点放在新文本字段上。

请记住，在弄乱价值之前，你会想要转换为type =“text”;当它是type =“password”时有限制。

jQuery：带有可读标签的密码字段？

3 个答案: