jQuery-联系人字段交互

Question

嘿，我正在尝试创建对抗的字段交互。当我们单击任何应显示标签文本的字段时，我尝试了但没用，并且还附加了我的代码以更清楚。你们能帮我吗？谢谢：）

$('.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节点的，该节点没有附加值。您需要选择嵌套的input / textarea元素，即$(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事件监听器绑定到包装的div.form-grid上。您可以做的是将input事件侦听器绑定到div.form-grid内部的输入元素，然后只需切换父元素上的类即可：

$('.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>

Answer 2

尝试此方法，效果很好。

$('.form-grid').on("input", function() {
         $('.form-grid').removeClass('active');
        $(this).addClass('active');

});

Answer 3

为处理标签添加每个输入的类

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

在脚本键入功能中

  $('label[for="text_input"]').hide() 

尝试一下。