jquery - Facebookのそっくりさんステータス更新テキストボックス

Question

ステータス更新テキストボックスのようなFacebookを作成する必要があります。つまり、最初は小さなスリムなテキストボックスのようになり、ユーザーがクリックすると、大きくて一種のテキストエリアになります。

誰かがそれを行う方法について何か考えを持っていますか？

注意：添付画像をご覧ください。

Answer 1

今日、これには必ずしもjQueryやJavaScriptは必要ありません。:focus pseudo-classセレクターでを使用して、純粋なCSSでこれを実際に行うことができます。

textarea {
  width: 500px;
  height: 20px;
}

textarea:focus {
  height: 100px;
  /* Uncomment for gradual resizing
  -webkit-transition: all 1s;
  -moz-transition:    all 1s;
  -ms-transition:     all 1s;
  -o-transition:      all 1s;
  transition:         all 1s;
  */
}

Dabblet：http ://dabblet.com/gist/3429275?result

Answer 2

1つは小さなテキストボックスで、もう1つはtextareaと下部のボタン（CSSを使用）で2つのdivを作成します。最初のテキストボックスのblur（）関数を使用して、それ自体を非表示にし、textareaとボタンで他のdivを表示します。[投稿]ボタンを押すと、2番目のdivが非表示になり、最初のdivが表示されます。