密码字段的标签答案

【问题标题】：Label for password field密码字段的标签
【发布时间】：2010-12-25 03:02:00
【问题描述】：

<input type="text" value="useraname" />
<input type="password" value="password" />

我正在使用 jQuery 使内联标签在单击/聚焦时消失。密码像往常一样显示多头，但我想知道是否有可能以某种方式在密码字段内将“密码”标签显示为文本（而不是••••）？

编辑添加：我当然希望隐藏用户输入的密码！。

谢谢

【问题讨论】：

标签： jquery input passwords label field

【解决方案1】：

如果您输入 type="textbox"，您将能够看到密码。

【讨论】：

当然，但是密码也将可见。我只需要标签是文本。
我不确定你的意思。
框获得焦点后，将其更改为 type="password" 。大概您已经获得了在框聚焦时清除值的代码，因此只需将其添加到那里。不过插件路线可能会更好。
@WaffleMatt：好主意，但我不知道该怎么做，有人可以帮忙写代码吗？非常感谢！

【解决方案2】：

有插件。以labelify 为例

【讨论】：

除非我弄错了插件文档没有提到密码。我只是迅速将其中一种字段类型更改为“密码”，所有字符都变成了点。此插件是否可以按照 OP 的要求使用密码字段？
同样的故事。它仅适用于文本字段，不适用于密码字段。

【解决方案3】：

我认为您需要在密码字段顶部动态覆盖才能执行此操作。

【讨论】：

【解决方案4】：

查看下面的代码。只需将 addPassClear("Password") 附加到您想要此功能的任何输入元素即可。

$(function() {
$.fn.addPassClear =
function(text)
{
  return $(this).each(
  function()
  {
    $(this).focus(function(event){$(this).passFocusize(text); $(this).select(); });
    $(this).blur(function(event){$(this).passBlurize(text); });
  });
}
$.fn.passFocusize =
function(text)
{
  return $(this).each(
  function()
  {
    if ($(this).val()==text && $(this).attr("type")=="text")
    {
      $(this).val("");
      this.type="password";
    }
  });
};
$.fn.passBlurize =
function(text)
{
  return $(this).each(
  function()
  {
    if ($(this).val()=="")
    {
      $(this).val(text);
      this.type="text";
    }
  });
};
};

【讨论】：

【解决方案5】：

为什么要写这么长的脚本？这只是一个简单的任务，只需半行代码即可完成：

<input type='text' onclick="this.type='password',value=''" class='watever' value='password'..etc

欢呼

【讨论】：

喜欢这个，但我认为onfocus 比onclick 更好，因为它也会在用户进入字段时触发...

【解决方案6】：

检查字段内标签 jQuery 插件 http://fuelyourcoding.com/scripts/infield/

【讨论】：

【解决方案7】：

我的解决方案接近 Dan 上面提供的解决方案。

<script language="javascript" type="text/javascript">
    function SwapLabel(id, label, alttype) {
        $(id).focus(function () {
            if (this.value == label) {
                this.value = "";
                if (this.type == 'text' && label == 'Password') {
                    this.type = alttype;
                }
            }
        });
        $(id).blur(function () {
            if (this.value == "") {
                this.value = label;
                if (this.type == alttype && label == 'Password') {
                    this.type = 'text';
                }
            }
        });
    }
    $(document).ready(function () {
        SwapLabel('#UserName', 'Username', '');
        SwapLabel('#Password', 'Password', 'password');
    });
</script>

这里的替代方法是省略“label”参数，而只使用“title”值，这基本上就是 labelify.js 所做的。如果需要，您可以添加 labelify 部分，将这些事件处理程序应用于所有文本类型的输入。或者下载 labelify 并在需要的地方添加以下代码：

            if (this.type == 'text' && label == 'Password') {
                this.type = alttype;
            }

            if (this.type == 'text' && label == 'Password') {
                this.type = alttype;
            }

我的 sn-p 与 labelify 相比的唯一优势是它包含了您原来问题的答案：

我想知道是否有可能以某种方式在密码字段内将“密码”标签显示为文本（而不是••••）？

【讨论】：