扩大/缩小文本打字区域

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：

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

JS：

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