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