jQuery:带有可读标签的密码字段?

我为当前名为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'); 

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

 

但是现在我想知道如何扩展该function以在密码字段中包含标签! 听起来很奇怪……解释:我想要一个密码字段( type="password" ),在其中有一个可读标签(如“输入密码”)。 一旦用户输入文本,密码应该是不可读的(点线)。 我知道,这个解释真的很糟糕,但我想你可能会得到我的意思。

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

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

如果您使用位于(透明) 下的真实而不是使用value属性(具有一些主要的可访问性含义)伪装它,那么您可以执行以下操作: http : //dorward.me.uk/ TMP /标签工作/ example.html的

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

确定Web应用程序,但如果你想在iPhone应用程序上使用页面,那么它无法正常工作,正确答案请参阅此处 – http://blog.stannard.net.au/2011/01/07/creating-a -forms与-标签-内部文本字段-使用- jQuery的/

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

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