Amoro
Amoro

Reputation: 75

Specifiy input targeted blur function

My function works as it should. is there a way to remove the function from a specific input? Because it changes all inputs.. i have 2 check boxes and 1 input that i need to not have this function on.

$('input').blur(function(){
    $('input').parent().removeClass("gray");
})
    .focus(function() {     
        $(this).parent().addClass("gray")
});

Upvotes: 0

Views: 53

Answers (3)

Aftab Ahmed
Aftab Ahmed

Reputation: 1737

If you have id's for those three inputs you can use this code snippet.

$('input').blur(function(){
    $(this).parent().removeClass("gray");
 })
.focus(function() {     
    $(this).parent().not( "#id1, #id2, #id3" ).addClass("gray")
 });

It will add class to those inputs which do not match the selector.

Upvotes: 0

Rayon
Rayon

Reputation: 36599

Use this context, $('input') will select all the <input> elements, this in the callback will hold the element on which event is invoked!

$('input').blur(function() {
    $(this).parent().removeClass("gray");
  })
  .focus(function() {
    $(this).parent().addClass("gray")
  });
.gray {
  background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <input type="text">
</div>
<div>
  <input type="text">
</div>

Upvotes: 2

Sasikumar
Sasikumar

Reputation: 863

Try adding a class to the input and checkbox that you don't want the onblur functions, then update the code as below

Add the class to the three inputs that you don't want this feature

$('input').not( ".class" ).blur(function() {
    $(this).parent().removeClass("gray");
  })
  .focus(function() {
    $(this).parent().addClass("gray")
  });

Hope this helps what you need.

Upvotes: 3

Related Questions