当输入为焦点或填充时，则显示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

尽管使用JavaScript及其所有库当然可以做到这一点，但如果能够将required属性添加到<input>元素，然后设计相邻元素的可见性，则也可以使用纯CSS .placeholder-text带有:valid psuedo-class的.placeholder-text元素：

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

请注意，我已经使用元素的opacity过渡来调整.placeholder-text元素的可见性，以避免使用display: none / display: initial （or 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 ^{“可以使用”兼容性} 。
  • :valid伪类 。
• HTML：
  • HTML属性（用于required属性） 。

Answer 2

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

---

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

我希望这可以帮到你。