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

Question

我基本上是在用 jquery 模仿 facebook 上的共享按钮功能，我想做的是当我点击文本框区域时，文本框的高度会变大。当我点击离开时，它应该恢复正常。对于最后一段 jquery，代码根本不起作用。我有什么选择让这个工作？ 谢谢。


附言:
我知道大部分都可以用 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.