Javascript 如何在单击时展开文本区域

我正在做一个小项目，它有一个文本区域，我需要帮助让文本区域像推特和facebook那样在鼠标点击时扩展。textarea一开始应该看起来像一个textfield，然后单击时应该展开。

使用此插件>

---

非常简单有效

这将对您有用：

<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>

Tweet Tweet。。。。

我使用了

onfocus

而不是

onclick

，因为如果用户使用tab键移动到文本区域，则不会触发

onclick

。您还需要确保用户不能自己调整它的大小-因此使用了style属性

您还可以添加

onblur=“this.rows=1；”

以在用户移出您的文本区域后将其缩小。

<textarea style="width:200px; height:50px;" id="ta"></textarea>

var ta = document.getElementById('ta');
ta.onclick = function(){
    this.style.height = "400px";
}  

var ta=document.getElementById（'ta'）；
ta.onclick=函数（）{
this.style.height=“400px”；
}  

---

快速小提琴：

您可以执行以下操作：

<textarea name="textBox" rows="1" cols="20" id="textBox" onfocus="document.getElementById('textBox').rows = 5;" >

---

像这样的东西会有用

演示：

CSS

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML

<textarea class="expand" rows="1" cols="10"></textarea>

---

这可以在不使用JavaScript/jQuery、使用CSS的情况下完成

textarea{
高度：1米；
宽度：50%；
填充：3倍；
过渡：所有0.5s缓解；
}
文本区域：焦点{
高度：4em；
}

默认css

textarea{ height: 50px;}

聚焦文本区域高度将增加：）simple jquery基于使用jquery，我增强了代码，根据内容长度自动调整大致行数，并在焦点丢失时返回1

HTML:

---

您可以使用CSS仅使用

position:absolute

（使其浮动在其他元素上）和

：focus

选择器（仅当元素具有焦点时才应用）来执行此操作。首先，您需要保留包含在元素中的textarea大小：

<div class="textarea"><textarea></textarea></div>

div.textarea {
   height: 50px;
   width: 400px;
}

最后是重点

textarea:focus {
   z-index: 1001;
   min-height:250px;
}

---

Fiddle:

类似于jQuery示例的内容？所有答案仅将文本区域扩展到固定长度。elastic插件非常酷，因为它随着用户输入的每一行代码而扩展。实际上，Ben的解决方案比我的更简单。jQuery没有

$get

。它有$。获取，但这是完全不同的。除此之外，既然已经有了

这个

，为什么还要使用选择器呢？还是很难看<代码>this.rows=5注意此方法不需要任何javascript库的开销。但是如果您在项目的其他部分使用jQuery，那么@wdm的代码将是最好的。如果您愿意，您可以实际设置行的动画：

$（this）这应该是可接受的答案。这是最简单的一个，依赖性最小。我喜欢这样，但我的问题是，当没有聚焦时，textarea将返回到高度：1米。我们能在不将元素压到下面的情况下实现这一点吗？需要注意的是。如果通过句柄手动调整textarea的大小，则不会将其调整回一行。发生此操作时，通过内嵌样式应用高度。此行为的修复方法是清除
style='
属性。这可以通过
onblur='This.style=“；”内联完成
或添加
$（this.css（{height:'}）到上面的模糊函数。@illdapt我编辑了答案，以便按照建议进行改进，细节不错。谢谢你的评论！
<textarea class="expand" rows="1" cols="10"></textarea>

$('textarea.expand').focus(function () {
    $(this).animate({rows: Math.max(1,Math.ceil($(this).val().length/this.cols))}, 500);
});
$('textarea.expand').blur(function () {
    $(this).animate({rows: 1}, 500);
    //Resize back to one row if the textarea is manually resized via the handle
    $(this).css({height: ''});
    $(this).css({width: ''});
});

<div class="textarea"><textarea></textarea></div>

div.textarea {
   height: 50px;
   width: 400px;
}

textarea {
   position: absolute;
   height: 50px;
   width: 400px;
   transition: all 200ms;
}

textarea:focus {
   z-index: 1001;
   min-height:250px;
}