quand je clique sur cette zone de texte, elle devient grande mais quand je clique loin comment puis-je la faire revenir à la normale?

Question

Je suis fondamentalement imitant la fonctionnalité de bouton de partage sur facebook avec jquery et ce que j'essaie de faire est quand je clique sur la zone de zone de texte, la zone de texte devient plus grande par la hauteur. et quand je clique, il devrait revenir à la normale. avec le dernier morceau de jquery, le code ne fonctionne pas du tout. quelles sont mes options pour que cela fonctionne? merci.


ps:
je sais que la plupart de ce qui peut être fait avec css mais je suis expérimenter avec jquery pour mieux apprendre il. :)

voici ma jquery.

$(function() { 

    $('input[name=search]').click(function() { 

    $(this).addClass('txthover'); 
    }); 

    $('body').click(function() { 

     $('input[name=search]').removeClass('txthover'); 
    }); 

}); 

le code html

<div id="box"> 
<div id="search"> 
<input type="text" name="search" /><input type="button" name="btnsearch" value="search" /> 
</div> 
</div> 

Answer 1

La bonne façon de le faire serait d'utiliser la mise au point et le flou des événements de l'élément:

$('input[name=search]').focus(function() { 
    $(this).addClass('txthover'); 
}).blur(function() { 
    $(this).removeClass('txthover'); 
}); 

Here is a quick example.