jQuery：带有可读标签的密码字段？ [英] jQuery: password field with readable label?

问题描述

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

I wrote this very simple function for my current project called insidelabel() that let's me add a description (label) for an input field inside of the input.

//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');

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

So when an input is focused the text disappears and when it blurs it has the same text again.

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

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

However now I wonder how I could extend that function to have a label inside of password fields as well! Sounds weird... Explanation: I want a password field (with type="password") to have a readable label (like "enter password") inside of it. Once the user enters text the password should be unreadable (dotted). Really bad explanation, I know, but I think you might get what I mean.

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

I wonder what's the best way to do that? Should I query if an input field is type="password" and if so I set it to type="text" - once text is entered I set it back to type="password" again. Any idea what's the best solution for that?

这是我的例子： http://jsfiddle.net/R8Zxu/

推荐答案

如果你使用真正的< label> 位于（透明）< input> 下，而不是使用value属性伪装（具有一些重要的可访问性含义） ）然后你可以这样做： http://dorward.me.uk/tmp /label-work/example.html

If you use a real <label> positioned under the (transparent) <input> instead of faking it with the value attribute (which has some major accessibility implications) then you can do something like: http://dorward.me.uk/tmp/label-work/example.html

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

Don't try to change the type of an existing input. Internet Explorer won't let you.

这篇关于jQuery：带有可读标签的密码字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！