когда я нажимаю на это текстовое поле, оно становится большим, но когда я щелкаю прочь, как мне вернуть его к нормальному состоянию?

Question

Я в основном имитирую функцию кнопки «Поделиться» на Facebook с помощью jquery, и я пытаюсь сделать, когда я нажимаю на область текстового поля, текстовое поле увеличивается по высоте. и когда я щелкаю прочь, он должен вернуться к нормальной жизни. с последним фрагментом 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');
});

Вот краткий пример.