隐藏输入的标签,不带属性“required”(浮动标签)

时间:2015-08-30 09:05:46

标签: html css labels floating

我有这段代码:

<span class="field">
<input type="text" id="first-name" placeholder="First Name" required />
<label for="first-name">First Name</label>
</span>

<span class="field">
<input type="text" id="last-name" placeholder="Last Name" />
<label for="last-name">Last Name</label>
</span>

第二个输入的标签(“姓氏”)从一开始就可见,而不仅仅是像“名字”标签一样在焦点上。两个输入之间的差异仅在“必需”属性中,我不需要“姓氏”字段。

如何为没有隐藏“必需”属性的输入制作标签?我需要它只在焦点上显示过渡效果。就像“名字”字段的这项工作一样。

http://jsfiddle.net/dmitriy_kalmykov/68jmbquy

3 个答案:

答案 0 :(得分:1)

您可以使用相邻的兄弟选择器。将以下代码添加到CSS文件中。

input[required] + label {
  display: none;
}

答案 1 :(得分:0)

如果使用last-name字段也需要,但在提交表单时用javascript覆盖姓氏输入的必需属性。

document.getElementById("last-name").required = false;

答案 2 :(得分:0)

我知道这个问题是在9个月前提出来的,但是这可以在将来帮助某人。 我猜您无法提交表单,因为所有带浮动标签的字段都应该带有必需的属性。如果您将字段留空,表单将无法提交。如果删除该属性,标签是可见的,您可以提交表单,但浮动标签的想法已被破坏。

如果我是对的,请尝试以下代码:

   $( document ).ready(function() {

$('#sub-btn').click(function validateForm() {
  var isValid = true;
  $('.field').each(function() {
    if ( $(this).val() === '' )
        $(this).removeAttr("required");
  });
  return isValid;
});
});

它对我有用。您应该设置提交按钮 id =&#34; sub-btn&#34; 所以当您点击它时,它将清除所需的属性。