CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Josh Poor
Josh Poor

Reputation: 533

How to make only 1 input box do animation on focus using Jquery

Fiddle And Code: 

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

As you can see, If I click on 1 input box, then the other one also do the same animation. How can i make only the clicked input box do this animation.

Expected Result:

  1. On click, the fake placeholder will go up (only the clicked one)
  2. The fake placeholder will stay up, if the input box has some value.

Upvotes: 1

Views: 141

Answers (4)

Aaron Meese
Aaron Meese

Reputation: 2223

You just have to add separate ID's to access the different fields.

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

Then apply the fakeplaceholdertop class to the specific element.

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

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

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

Use $(this).next(".fakeplaceholder").

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

It will target the next element with the class fakeplaceholder right after the input you focus

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

Upvotes: 5

kyun
kyun

Reputation: 10264

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

Upvotes: 1

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

You are applying animation to all matching elements. Use this to target current element to perform the animation. Try using this

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

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

Upvotes: 0

Related Questions