javascript - Jquery - 联系人字段交互

Question

大家好，我正在尝试创建 contect fielded 交互。当我们点击任何字段时，标签文本应该上升。我试过但没有用，为了更清楚起见，我还附上了我的代码。你们能帮帮我吗？谢谢:)

$('.form-grid').keyup(function() {
  if ($(this).val()) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
});

.form-grid {
  max-width: 200px;
  position: relative;
  margin-bottom: 25px;
}

.form-grid input,
.form-grid textarea {
  height: 50px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #000000;
}

.form-grid label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.form-grid.active label {
  top: -15px;
}

<div class="form-grid">
  <input type="text">
  <label> Name </label>
</div>

<div class="form-grid">
  <input type="email">
  <label> Email </label>
</div>

<div class="form-grid">
  <input type="tel">
  <label> Phone </label>
</div>

<div class="form-grid">
  <textarea></textarea>
  <label> Message </label>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

Answer 1

那是因为代码中的 $(this) 元素实际上引用了 div.form-grid 节点，它没有附加值。你想要的是选择嵌套的输入/文本区域元素，即 $(this).find('input, textarea').first().val():

$('.form-grid').keyup(function() {
  if ($(this).find('input, textarea').first().val()) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
});

请参阅下面的概念验证:

$('.form-grid').keyup(function() {
  if ($(this).find('input, textarea').first().val()) {
    $(this).addClass('active');
  } else {
    $(this).removeClass('active');
  }
});

.form-grid {
  max-width: 200px;
  position: relative;
  margin-bottom: 25px;
}

.form-grid input,
.form-grid textarea {
  height: 50px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #000000;
}

.form-grid label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.form-grid.active label {
  top: -15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
  <input type="text">
  <label> Name </label>
</div>

<div class="form-grid">
  <input type="email">
  <label> Email </label>
</div>

<div class="form-grid">
  <input type="tel">
  <label> Phone </label>
</div>

<div class="form-grid">
  <textarea></textarea>
  <label> Message </label>
</div>

---

但是，我建议不要将 keyup 事件监听器绑定(bind)到包装 div.form-grid。您可以做的是将 input 事件监听器绑定(bind)到 div.form-grid 中的 input 元素，然后只需切换父元素上的类即可:

$('.form-grid input, .form-grid textarea').on('input', function() {
  var $formGrid = $(this).closest('.form-grid');
  if (this.value)
    $formGrid.addClass('active');
  else
    $formGrid.removeClass('active');
});

.form-grid {
  max-width: 200px;
  position: relative;
  margin-bottom: 25px;
}

.form-grid input,
.form-grid textarea {
  height: 50px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #000000;
}

.form-grid label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

.form-grid.active label {
  top: -15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grid">
  <input type="text">
  <label> Name </label>
</div>

<div class="form-grid">
  <input type="email">
  <label> Email </label>
</div>

<div class="form-grid">
  <input type="tel">
  <label> Phone </label>
</div>

<div class="form-grid">
  <textarea></textarea>
  <label> Message </label>
</div>