当我点击这个文本框它变得很大，但是当我点击离开时，我该如何让它恢复正常？

Question

我基本上模仿Facebook上的共享按钮功能与jquery和im试图做的是当我点击文本框区域的文本框变得更大的高度。当我点击它应该恢复正常。与最后一块jQuery代码完全不起作用。我的选择是什么让这个工作？ 谢谢。


PS：
我知道大多数的这可以用CSS做但我与jQuery试验，以便更好地了解它。 :)

这里是我的jQuery。

$(function() { 

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

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

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

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

}); 

的HTML

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

Answer 1

正确的方式做到这一点是使用的焦点和模糊元素的事件：

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

Here is a quick example.