Facebook看起来像是状态更新文本框

Question

我需要创建一个facebook看起来像状态更新文本框。 我的意思是，首先它将像一个微小的文本框，当用户clikcs上， 它会变得很大，有点像textarea。

有没有人知道怎么做？

N.B。请参阅附图。

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

使用小文本框制作两个div，另一个使用textarea和底部的按钮（使用CSS）。使用第一个文本框的blur（）函数隐藏自身并使用textarea和按钮显示另一个div。当按下Post按钮时，第二个div应该隐藏，并且应该显示第一个div。