在打字时扩展/收缩Textarea

Question

我希望有一个评论字段，当用户点击它时会显示所有文本，然后当用户点击文本区域时缩小（隐藏不可显示的文本）。用户应该能够输入文本并修改他们看到的内容。

我假设textarea是要走的路，因为输入没有多行功能。但是，我对如何实现这一点感到有些困惑。似乎所有东西都只有textarea调整大小以适应文本，但在用户输入完成后不会缩小。

有人可以帮助我/指出正确的方向吗？

谢谢！

Answer 1

用户点击后，您可以使用:focus和:active状态更改文本框。类似的东西：

textarea{
 width: 200px;
 height: 200px;
 resize: none;
}

textarea:focus,
textarea:active{
  width: 400px;
  height: 400px;
}

用户点击该空间后，文本框将展开为新尺寸。如果您熟悉添加悬停状态，这些工作与:hover非常相似。

在jsbin演示：http://jsbin.com/culil/1/

<小时/> 要将此样式添加到您的页面，您有两个选择。

1：您可以将其作为css类包含在您网站的样式表中：

的CSS：

.parentcontainer > textarea:focus,
.parentcontainer > textarea:active {
  width: 400px;
  height: 400px;
}

这是一种最佳实践，因为它将样式（应该是CSS）和添加交互性（应该是JavaScript）的问题分开。

2：您可以在使用javascript追加元素之前添加该类：

的CSS：

.your-textarea-class:focus,
.your-textarea-class:active{
      width: 400px;
      height: 400px;
}

JS：

$(function(){
  var textarea = $(".parentDiv").append("<textarea></textarea>");
  $("textarea").addClass("my-textarea-class"); 
});

http://jsbin.com/buhado/1/edit