我为我当前的项目编写了这个名为 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/
最佳答案
如果你使用真正的<label>
位于(透明)<input>
下方而不是用 value 属性伪造它(这有一些主要的可访问性影响)那么你可以做类似的事情:http://dorward.me.uk/tmp/label-work/example.html
不要尝试更改现有输入的类型。 Internet Explorer 不允许。
关于javascript - jQuery:带有可读标签的密码字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5341546/