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

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