输入焦点时隐藏标签答案

【问题标题】：Hide Label When input is in focus输入焦点时隐藏标签
【发布时间】：2012-05-23 20:27:34
【问题描述】：

我有一个带有标签覆盖输入的表单。如下图所示

下面是一个相同的代码示例。

<label for="edit-submitted-name--2">
Name
<span class="form-required" title="This field is required.">*</span>
</label>
<input id="edit-submitted-name--2" class="form-text required" type="text" maxlength="128" size="35" value="" name="submitted[name]">

我想在每次用户关注输入时使用 jquery 并隐藏标签。标签仅在输入为空或输入未聚焦时才可见。

  $("input").focus(function () {
          //hide the label corresponding to this input
     });

如何使用 jquery 选择与此输入对应的标签？

注意：我无法在 html 中更改任何内容，因为它是由 Drupal 中的模块生成的。

【问题讨论】：

标签： javascript jquery focus label show-hide

【解决方案1】：

占位符属性是这项工作的正确工具：

<input id="edit-submitted-name--2" class="form-text required" type="text" maxlength="128" size="35" placeholder="Name *" name="submitted[name]">

http://www.w3schools.com/html5/att_input_placeholder.asp

但不要忘记无标签输入字段是不好的做法。占位符应被视为提示。它们不能替代标签。

【讨论】：

另外值得注意的是，占位符不允许太多样式，而且你不能像上面的例子那样用其他颜色制作星号。

【解决方案2】：

从当前元素中选择上一个元素。

$(this).prev("label").hide();

和

$(this).prev("label").show();

但是，这不是标签元素的用途。

【讨论】：

【解决方案3】：

Remy Bach 已经创建了超级标签，可以满足您的需求，我会使用他的代码，但如果您正在寻找稍微不同的东西，那么您可以使用他的代码作为模板。

https://github.com/remybach/jQuery.superLabels

【讨论】：