javascript - 当输入焦点或已填充时显示 div jquery

Question

我试图获取当输入为焦点或填充时的条件，然后在每个输入元素上显示一个 div。

在焦点上它工作正常，但无法在填充的输入上完成这项工作。

$('.field').focus(function() {
  $('.placeholder-text').hide();
  var i = 0;

  $('.field').each(function() {
    if ($(this).is(":focus") || $(this).val() > 0) {
      $($('.placeholder-text')[i]).show();
    }
    i++;
  })

  $(document).bind('focusin.placeholder-text click.placeholder-text', function(e) {
    if ($(e.target).closest('.placeholder-text, .field').length) return;
    $(document).unbind('.placeholder-text');
    $('.placeholder-text').fadeOut('medium');
  });
});
$('.placeholder-text').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" class="field" name="name" type="text" placeholder="First Name" />
<div class="placeholder-text" for="name">First Name</div>

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

Answer 1

1. 使用 .on 而不是 .bind，但不要像现在这样绑定(bind)每个焦点
2. 绑定(bind)焦点、模糊和输入
3. 除了标签之外没有“for”

<小时/>

$(".field").on("input", function() {
  $(this).next().toggle(this.value != "");
});
$(".field").on("blur", function() {
  if (this.value == "") $(this).next().fadeOut('medium');
})
$(".field").on("focus", function() {
  $(this).next().fadeIn('medium');
})

.placeholder-text { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" class="field" name="name" type="text" placeholder="First Name" /><span class="placeholder-text">First Name</span><br/>

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