带有可读标签的密码字段

带有可读标签的密码字段

本文介绍了jQuery:带有可读标签的密码字段?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我为当前名为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?

这是我的例子:

推荐答案

如果你使用真正的< label> 位于(透明)< input> 下,而不是使用value属性伪装(具有一些重要的可访问性含义) )然后你可以这样做:

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:带有可读标签的密码字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-21 08:13