如何使用Jquery僅使1個輸入框聚焦動畫

Question

小提琴和代碼：

 $(document).ready(function(){ $("input").focus(function(){ $(".fakeplaceholder").addClass("fakeplaceholdertop"); }); $("input").blur(function(){ if(!$('input').val()) { $(".fakeplaceholder").removeClass("fakeplaceholdertop"); } }); }); 

 .accountbox { background-color:#ffffff; padding: 15px 120px 50px 50px; } :focus{outline: none;} .input1div { display:inline-block; position: relative; } .input1div input { font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } .input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;} .input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;} .input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;} .fakeplaceholder { position: absolute; pointer-events: none; top: 10px; color:#8c8c8c; transition: 0.28s ease all; } .fakeplaceholdertop { top: -10px; font-size:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="accountbox"> <p style="font-size:25px;font-weight:600;">Sign Up</p> <form class="accountform"> <div class="input1div"> <input class="firstname" type="text" name="firstname" /> <span class="fakeplaceholder">First Name</span> <span class="focus-border"></span> </div> <br/><br/><br/> <div class="input1div"> <input type="text" name="lastname" /> <span class="fakeplaceholder">Last Name</span> <span class="focus-border"></span> </div> </form> </div> 

如您所見，如果我單擊1個輸入框，則另一個也將執行相同的動畫。 我如何才能僅使單擊的輸入框執行此動畫。

預期結果：

1. 單擊時，假占位符將上升（僅單擊的占位符）
2. 如果輸入框具有某些值，則偽造的占位符將保留下來。

Answer 1

使用$(this).next(".fakeplaceholder") 。

$("input").focus(function() {
  $(this).next(".fakeplaceholder").addClass("fakeplaceholdertop");
});
$("input").blur(function() {
  if (!$('input').val()) {
    $(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop");
  }
});

fakeplaceholder您關注的輸入之后， fakeplaceholder類定位下一個元素

 $(document).ready(function() { $("input").focus(function() { $(this).next(".fakeplaceholder").addClass("fakeplaceholdertop"); }); $("input").blur(function() { if (!$(this).val()) { $(this).next(".fakeplaceholder").removeClass("fakeplaceholdertop"); } }); }); 

 .accountbox { background-color: #ffffff; padding: 15px 120px 50px 50px; } :focus { outline: none; } .input1div { display: inline-block; position: relative; } .input1div input { font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } .input1div input { border: 0; padding: 7px 0; border-bottom: 1px solid #ccc; } .input1div input~.focus-border { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s; } .input1div input:focus~.focus-border { width: 100%; transition: 0.4s; } .fakeplaceholder { position: absolute; pointer-events: none; top: 10px; color: #8c8c8c; transition: 0.28s ease all; } .fakeplaceholdertop { top: -10px; font-size: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="accountbox"> <p style="font-size:25px;font-weight:600;">Sign Up</p> <form class="accountform"> <div class="input1div"> <input class="firstname" type="text" name="firstname" /> <span class="fakeplaceholder">First Name</span> <span class="focus-border"></span> </div> <br/><br/><br/> <div class="input1div"> <input type="text" name="lastname" /> <span class="fakeplaceholder">Last Name</span> <span class="focus-border"></span> </div> </form> </div> 

Answer 2

 $(document).ready(function(){ $("input").focus(function(){ $(this).next().addClass("fakeplaceholdertop"); }); $("input").change(function(){ if($(this).val()==""){ $(this).next().removeClass("fakeplaceholdertop"); }else{ $(this).next().addClass("fakeplaceholdertop"); } }); }); 

 .accountbox { background-color:#ffffff; padding: 15px 120px 50px 50px; } :focus{outline: none;} .input1div { display:inline-block; position: relative; } .input1div input { font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px; } .input1div input {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;} .input1div input ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;} .input1div input:focus ~ .focus-border{width: 100%; transition: 0.4s;} .fakeplaceholder { position: absolute; pointer-events: none; top: 10px; color:#8c8c8c; transition: 0.28s ease all; } .fakeplaceholdertop { top: -10px; font-size:10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accountbox"> <p style="font-size:25px;font-weight:600;">Sign Up</p> <form class="accountform"> <div class="input1div"> <input class="firstname" type="text" name="firstname" /> <span class="fakeplaceholder">First Name</span> <span class="focus-border"></span> </div> <br/><br/><br/> <div class="input1div"> <input type="text" name="lastname" /> <span class="fakeplaceholder">Last Name</span> <span class="focus-border"></span> </div> </form> </div> 

Answer 3

您正在將動畫應用於所有匹配的元素。 使用this來定位當前元素以執行動畫。 試試這個

$(this).parent().find(".fakeplaceholder").addClass("fakeplaceholdertop");

$(this).parent().find(".fakeplaceholder").removeClass("fakeplaceholdertop");

Answer 4

您只需添加單獨的ID即可訪問不同的字段。

<span class="fakeplaceholder" id="first">First Name</span>
<span class="fakeplaceholder" id="last">Last Name</span>

然后將fakeplaceholdertop類應用於特定元素。

$(".firstname").focus(function() {
    $("#first").addClass("fakeplaceholdertop");
});

$(".lastname").focus(function() {
    $("#last").addClass("fakeplaceholdertop");
});