CODEWITHSUNDEEP
jquery
somewhereInPHP
somewhereInPHP

Reputation: 255

jquery focus in / out

I would like is to add class "active" to input on input focus, and when focus off, remove that class.

Thank's

Upvotes: 23

Views: 67275

Answers (10)

ozarius
ozarius

Reputation: 134

If target-id is the id of the input on which you want to swap the class in and out, you could use something like this:

$('#target-id').focusin(  
  function(){  
    $(this).addClass('active');  
  }).focusout(  
  function(){  
    $(this).removeClass('active');  
  });

Upvotes: 8

Raja Khoury
Raja Khoury

Reputation: 3195

You can attach event handlers using the .bind() or better the .on() method then check for the event.type 

$(element).bind("focus blur", function(event){
    event.stopPropagation();
     if(event.type == "focus")
       {
        // Input focused/clicked
        $(element).addClass('active');
       } 

     else if(event.type == "blur")
       {
        // Lost focus
        $(element).removeClass('active');
       }
 });

Upvotes: 0

honk31
honk31

Reputation: 4357

jQuery on() would look like this:

$('input').on("focus", function() {
  $(this).addClass('active');
}).on("blur", function() {
  $(this).removeClass('active');
});

or extra extra short:

$('input').on("focus blur", function() {
  $(this).toggleClass('active');
});

alternatives for focus & blur are "focusin" and "focusout" but are bubbling events as Michael Glass pointed out.

The focusin event is sent to an element when it, or any element inside of it, gains focus. This is distinct from the focus event in that it supports detecting the focus event on parent elements (in other words, it supports event bubbling).

Upvotes: 3

Aleksandr Skobeltcyn
Aleksandr Skobeltcyn

Reputation: 501

More usefull code if you use input elements, like 'Share forms' and use button 'Send message' or something than does't hide forms :

$(function() {
    $("html").click(function(e) {
        if (e.target.id == "your_id_element") { 
            $('#your_id_elements').addClass('open');
        } else if($(e.target).closest('.some_div_without_reaction').length == 0) { 
           if($('#your_id_element').hasClass('open') && $('#your_id_element').val()==''){
                $('#your_id_element').removeClass('open');
            }
        }
    });
})

Upvotes: 0

Youssef
Youssef

Reputation: 3114

Or better try to use this:

$('input[type="text"]').focus(function() {  
   $(this).addClass("active");  
}).blur(function() {  
    $(this).removeClass("active");  
});

Upvotes: 0

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

Try the following.

$("input[type=text]").focus(function(){
  $(this).addClass("active");
}).focusOut(function(){
  $(this).removeClass("active");
});

Upvotes: 5

nunopolonia
nunopolonia

Reputation: 14417

You can use jQuery's focus and blur functions

$('input[type="text"]').focus(function() {  
   $(this).addClass("active");  
});  
$('input[type="text"]').blur(function() {  
    $(this).removeClass("active");  
});

Upvotes: 1

Michael Glass
Michael Glass

Reputation: 1021

once you've included the jquery lib, it's pretty standard

$('input').focus( function() {
  $(this).addClass('active');
});

$('input').blur( function() {
  $(this).removeClass('active');
});

focus and blur are more appropriate than focusin and focusout for just input focusing. focusin and focusout bubble events to children objects and for the most part, that's (likely) unnecessary here.

pretty standard stuff. take a look at the jquery docs for more. also maybe modify the selector (the 'input' part) if you only want it for particular input fields.

selector examples:

$('input#my_id_is_bob') for $('input.my_class_is_activatable') for

Upvotes: 46

Frederik Kammer
Frederik Kammer

Reputation: 3177

$("#id-of-your-field").focusin(function() {
    $('#id-of-your-field').addClass("active");
});
$("#id-of-your-field").focusout(function() {
    $('#id-of-your-field').removeClass("active");
});

This would solve your problem

Upvotes: 6

Bhavya
Bhavya

Reputation: 283

You probably want something like $(this).attr('class','active'); in your focusin and $(this).attr('class',''); in your focusout.

Upvotes: 0

Related Questions