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

虽然JavaScript及其所有库当然都可以实现，但是如果您能够将required属性添加到<input>元素中，也可以使用纯CSS，然后使用.placeholder-text伪类对相邻:valid元素的可见性进行样式设置：

input:focus+.placeholder-text,
input:valid+.placeholder-text {
  opacity: 1;
}

请注意，我已经使用了元素opacity的过渡来调整.placeholder-text元素的可见性，以避免使用display: none所固有的突然出现/消失的刺激效果/ display: initial（或display: block）。

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

input+.placeholder-text {
  opacity: 0;
  transition: opacity 0.2s linear;
}

input:focus+.placeholder-text,
input:valid+.placeholder-text {
  opacity: 1;
}

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

在CSS中，也可以使用:placeholder-shown伪类；尽管这取决于您所需的浏览器兼容性（在我撰写本文时，Internet Explorer，Edge和Opera Mini不支持）；如果:placeholder-shown伪类的占位符值当前可见，则它与<input>元素匹配：

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

input + .placeholder-text {
  opacity: 0;
  transition: opacity 0.2s linear;
}

input:not(:placeholder-shown) + .placeholder-text {
  opacity: 1;
}

<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>

或者，为了简化CSS选择器并避免使用:not()求反运算符：

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

input:placeholder-shown+.placeholder-text {
  opacity: 0;
}

input+.placeholder-text {
  opacity: 1;
  transition: opacity 0.2s linear;
}

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

参考文献：

CSS：
- :not()。
- :placeholder-shown ^{"Can I Use" compatibility}。
- :valid pseudo-class。
HTML：
- HTML attributes (for the required attribute)。

Answer 2

使用.on而不是.bind，但不要像现在一样绑定每个焦点
绑定焦点，模糊和输入
除标签外没有“ 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>

Answer 3

我对您的HTML结构进行了一些更改，并且还提供了一些CSS。我已经优化了jQuery代码，它根据您的要求。请看看。

$(".first-name #name, .last-name #lname").on("focus", function() {
  $(this).parent().find(".placeholder-text").show();
});
$(".first-name #name, .last-name #lname").blur("focus", function() {
  $(this).parent().find(".placeholder-text").hide();
  if ($(this).val() == '' || $(this).val() == null) {
    $(this).parent().find(".placeholder-text").show();
  }
});

.placeholder-text {
  display: none;
}

.flex-box {
  display: flex;
}

.first-name,
.last-name {
  display: inline;
}

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

我希望这会有所帮助。

当输入为焦点或填充时，则显示div jquery

3 个答案: