当我点击这个文本框时它会变大但当我点击它时我该如何让它恢复正常？

Question

我基本上用jquery模仿facebook上的分享按钮功能,我想要做的是当我点击文本框区域时文本框的高度变大.当我点击它时它应该恢复正常.使用最后一段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');
});

这是一个简单的例子.