当输入有焦点时隐藏标签

Question

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

​

​

下面是相同的代码示例。

<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选择与此输入相对应的标签？

注释：I不能改变html中的任何东西，因为它是由Drupal中的一个模块生成的。

Answer 1

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

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

和

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

然而，这并不是label元素的目的。

Answer 2

占位符属性是此作业的正确工具：

<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

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

Answer 3

雷米巴赫已经创建了超级标签，它可以做你想做的事情，我会使用他的代码，但是如果你在寻找一些稍微不同的东西，那么你可以用他的代码作为模板。

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