浮动标签

Question

当你点击输入空间时，我创建了一个模仿浮动标签效果的表单，但出于某种原因，在我的JS中，我似乎无法让标签保持在“浮动”位置输入中有文字。

以下是代码：

    $(function() {
      $(".formStyle7 .input-group input").focusout(function() {

        var text_val = $(this).val();
        if (text_val === "") {
          $(this).removeClass('has-value');
        } else {
          $(this).addClass('has-value');
        }

      });

    });

  body {
    background-color: #F4F4F4;
  }
  .formStyle7 {
    display: block;
    height: 750px;
    width: 500px;
    background-color: #FFFFFF;
    border: none;
    border-radius: 3px;
    box-shadow: rgb(128, 128, 128) .1px .1px 5px, rgb(128, 128, 128) -.1px -.1px 5px;
    margin: 30px auto;
  }
  input {
    background: none;
    border: 1px solid #21a1e1;
    margin: 15px;
    display: inline-block;
    height: 30px;
    width: 455px;
  }
  input:focus,
  input:active {
    outline: none;
  }
  input[type="text"],
  input[type="email"] {
    border: none;
    border-bottom: 1px solid #b3c1cc;
  }
  .input-group {
    position: relative;
  }
  .input-group label {
    position: absolute;
    left: 15px;
    top: 30px;
    font-style: italic;
    font-size: 18px;
    color: #999;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.2s ease;
  }
  .input-group input:focus + label,
  .input-group input.has-value + label {
    top: 13px;
    font-size: 12px;
    color: #aaa;
  }
  #proposedWorkshopDDL {
    background: none;
    border: 1px solid #21a1e1;
    margin: 15px;
    display: inline-block;
    height: 30px;
    width: 455px;
  }
  #unitPresidentDDL {
    background: none;
    border: 1px solid #21a1e1;
    margin: 15px;
    display: inline-block;
    height: 30px;
    width: 455px;
  }
  .clearFix {
    clear: both;
  }
  header {
    height: 40px;
    width: 500px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 24px;
    color: #b3c1cc;
    float: left;
    margin: 25px 10px 0px 15px;
  }
  p {
    height: 40px;
    width: 500px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    color: #b3c1cc;
    float: left;
    margin-left: 15px;
    margin-top: -5px;
  }
  .formContainer {
    margin-top: 0px;
  }
  input[type="submit"] {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    color: #b3c1cc;
    border: none;
    border-radius: 3px;
    box-shadow: rgb(122, 122, 122) .1px .1px 2px;
  }
  input[type="submit"]:active {
    color: white;
    background-color: #21a1e1;
  }

<form class="formStyle7">

  <header>OECTA PD Network Workshop</header>
  <p>Workshop Application Form</p>
  <div class="clearFix"></div>

  <div class="formContainer">

    <div class="input-group">
      <input type="text" />
      <label>First Name</label>
    </div>


    <div class="input-group">
      <input type="text" />
      <label>Last Name</label>
    </div>


    <div class="input-group">
      <input type="email" />
      <label>Email Address</label>
    </div>


    <div class="input-group">
      <input type="text" />
      <label>Contact Number</label>
    </div>


    <select id="unitPresidentDDL">
      <option>Select</option>
      <option>Unit 1</option>
      <option>Unit 2</option>
      <option>Unit 3</option>
    </select>


    <select id="proposedWorkshopDDL">
      <option>Select</option>
      <option>Workshop 1</option>
      <option>Workshop 2</option>
      <option>Workshop 3</option>
    </select>

    <div class="input-group">
      <input type="text" />
      <label>Date for Workshop</label>
    </div>

    <div class="input-group">
      <input type="text" />
      <label>Time for Workshop</label>
    </div>

    <div class="input-group">
      <input type="text" />
      <label>Location for Workshop</label>
    </div>

    <div class="input-group">
      <input type="submit" />
    </div>


  </div>
  <!--end formContainer -->

</form>

Answer 1

原来我问的是错误的问题。代码本身很好，它是我忽略的JQuery插件，可以继承到代码的在线版本。那就是缺少的东西！