输入文本后，在输入字段顶部保持标签最小化？答案

【问题标题】：Keep label minimized at the top of input field once text has been entered?输入文本后，在输入字段顶部保持标签最小化？
【发布时间】：2016-12-18 09:39:34
【问题描述】：

一旦在表单中输入文本，我不知道如何在顶部保持标签最小化。

谁能帮忙？

http://codepen.io/cassieevans/pen/Vjqdba

<form id="form">

    <fieldset>
        <input id="name" name="" type="text"/>
        <label for="name">NAME</label>
    </fieldset>

    <fieldset>
        <input id="email" name="" type="email"/>
        <label for="email">EMAIL</label>
    </fieldset>

    <fieldset>
        <textarea id="message" name="" type="text"></textarea>
        <label for="message">MESSAGE</label>
    </fieldset>

【问题讨论】：

你忘记在你的 codepen 中添加 jQuery
codepen 中没有 JQuery

标签： html css forms labels

【解决方案1】：

编辑 V2：

这是另一个版本，它包含:valid 或:invalid 的符号。

代码片段：

//Contact Inputs
(function() {
  var inputs = $("input,textarea"),
    sFieldSetNotEmpty = "not-empty",
    sFieldSetError = "has-error",
    sFieldSetSuccess = "has-success";

  inputs.each(function() {
    var $this = $(this),
      $thisFieldSet = $this.parent("fieldset");

    $this
      .on("change", function() {
        if ($this.is(":valid")) {
          $thisFieldSet
            .removeClass(sFieldSetError)
            .addClass(sFieldSetSuccess);
        } else if ($this.is(":invalid")) {
          $thisFieldSet
            .removeClass(sFieldSetSuccess)
            .addClass(sFieldSetError);
        }
        if ($(this).val()) {
          $thisFieldSet.addClass(sFieldSetNotEmpty);
        } else {
          $thisFieldSet.removeClass(sFieldSetNotEmpty);
        }
      });
  });
})();

body {
  background-color: #191a1a;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}
#form {
  width: 50%;
  margin: 0 auto;
}
fieldset {
  border: none;
  position: relative;
}
input {
  font-size: 1.2em;
  width: 100%;
  height: 50px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 1em 1em .8em 1em;
  position: relative;
  background: transparent;
  color: #008080;
}
fieldset::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  font-size: 1.5em;
  pointer-events: none;
}
fieldset.has-success::after {
  content: "✓";
  color: greenyellow;
}
fieldset.has-error::after {
  content: "X";
  color: tomato;
}
input:focus {
  outline: none;
  background: transparent;
}
input + label {
  display: block;
  cursor: text;
  color: #777;
  transition: .15s ease-out all;
  position: absolute;
  top: 1.8em;
  left: 2.3em;
}
input:focus + label,
.not-empty label {
  top: 1em;
  left: 3em;
  font-weight: bold;
  font-size: .7em;
  color: #008080;
  transition: .15s ease-out all;
}
fieldset.has-success label {
  color: greenyellow;
}
fieldset.has-error label {
  color: tomato;
}
textarea {
  font-size: 1.2em;
  width: 100%;
  height: 200px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 1em 1em .8em 1em;
  background: transparent;
  outline: none;
  color: #008080;
}
textarea:focus {
  outline: none;
  background: transparent;
}
textarea + label {
  display: block;
  cursor: text;
  color: #777;
  transition: .15s ease-out all;
  position: absolute;
  top: 1.8em;
  left: 2.3em;
}
textarea:focus + label,
.not-empty label {
  top: 1em;
  left: 3em;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: .7em;
  color: #008080;
  transition: .15s ease-out all;
}
#submit {
  border: 2px solid #FFFFFF;
  border-radius: 300px;
  width: 20%;
  outline: none;
  cursor: pointer;
  margin: auto;
  display: block;
  margin-top: 20px;
  font-family: 'Raleway', sans-serif;
  color: #FFFFFF;
  padding: 10px;
}
#submit:hover {
  transition: background-color 1s ease;
  background-color: #008080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">

  <fieldset>
    <input id="name" name="" type="text" required/>
    <label for="name">NAME</label>
  </fieldset>

  <fieldset>
    <input id="email" name="" type="email" required/>
    <label for="email">EMAIL</label>
  </fieldset>

  <fieldset>
    <textarea id="message" name="" type="text" required></textarea>
    <label for="message">MESSAGE</label>
  </fieldset>

  <input id="submit" type="submit" value="GO!">
</form>

V1：

您的代码看起来不错，您只需要引用 jQuery。

我对您的代码进行了一些更改，并使用 CSS 伪类 :valid 和 :invalid 添加了验证。

这将帮助您获得更好的UX。

代码片段：

//Contact Inputs
(function() {
  var inputs = $("input,textarea"),
    sLabelNotEmpty = "stay",
    sLabelError = "label--error",
    sLabelSuccess = "label--success";

  inputs.each(function() {
    var $this = $(this),
      $thisLabel = $this.next("label");

    $this
      .on("change", function() {
        if ($this.is(":valid")) {
          $thisLabel
            .removeClass(sLabelError)
            .addClass(sLabelSuccess);
        } else if ($this.is(":invalid")) {
          $thisLabel
            .removeClass(sLabelSuccess)
            .addClass(sLabelError);
        }
        if ($(this).val()) {
          $thisLabel.addClass(sLabelNotEmpty);
        } else {
          $thisLabel.removeClass(sLabelNotEmpty);
        }
      });
  });
})();

body {
  background-color: #191a1a;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}
#form {
  width: 50%;
  margin: 0 auto;
}
fieldset {
  border: none;
  position: relative;
}
input {
  font-size: 1.2em;
  width: 100%;
  height: 50px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 1em 1em .8em 1em;
  background: transparent;
  color: #008080;
}
input:focus {
  outline: none;
  background: transparent;
}
input + label {
  display: block;
  cursor: text;
  color: #777;
  transition: .15s ease-out all;
  position: absolute;
  top: 1.8em;
  left: 2.3em;
}
input:focus + label,
.stay {
  top: 1em;
  left: 3em;
  font-weight: bold;
  font-size: .7em;
  color: #008080;
  transition: .15s ease-out all;
}
label.label--error {
  color: tomato;
}
label.label--success {
  color: greenyellow;
}
textarea {
  font-size: 1.2em;
  width: 100%;
  height: 200px;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 1em 1em .8em 1em;
  background: transparent;
  outline: none;
  color: #008080;
}
textarea:focus {
  outline: none;
  background: transparent;
}
textarea + label {
  display: block;
  cursor: text;
  color: #777;
  transition: .15s ease-out all;
  position: absolute;
  top: 1.8em;
  left: 2.3em;
}
textarea:focus + label,
.stay {
  top: 1em;
  left: 3em;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: .7em;
  color: #008080;
  transition: .15s ease-out all;
}
#submit {
  border: 2px solid #FFFFFF;
  border-radius: 300px;
  width: 20%;
  outline: none;
  cursor: pointer;
  margin: auto;
  display: block;
  margin-top: 20px;
  font-family: 'Raleway', sans-serif;
  color: #FFFFFF;
  padding: 10px;
}
#submit:hover {
  transition: background-color 1s ease;
  background-color: #008080;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">

  <fieldset>
    <input id="name" name="" type="text" required/>
    <label for="name">NAME</label>
  </fieldset>

  <fieldset>
    <input id="email" name="" type="email" required/>
    <label for="email">EMAIL</label>
  </fieldset>

  <fieldset>
    <textarea id="message" name="" type="text" required></textarea>
    <label for="message">MESSAGE</label>
  </fieldset>

  <input id="submit" type="submit" value="GO!">
</form>

【讨论】：

【解决方案2】：

您的代码运行良好。你只是忘了添加 jQuery。

$('input,textarea').on('blur', function(){
  if( !$(this).val() == "" ){
    $(this).next().addClass('stay');
  } else {
    $(this).next().removeClass('stay');
  }
});

您还应该将textarea 添加到您的选择器中，这样它也可以在那里工作。

【讨论】：