在 textarea 输入上增加 div 的宽度和高度答案

【问题标题】：Increase in width and height of div on textarea input在 textarea 输入上增加 div 的宽度和高度
【发布时间】：2012-10-22 11:41:10
【问题描述】：

我试图得到答案。 google 也搜到了。但遗憾的是无法得到答案。我有一个带有 textarea 的 div。在 keyup 上，我希望 div 随着输入的文本而增加，并且在输入时按 div 高度应该根据字体大小增加。当我按下回车键时，宽度会从停止的位置继续增加。检查这个小提琴并帮助我解决功能。演示：http://jsfiddle.net/shabbirrangwala/NkRYY/8/

$('textarea').keyup(function(e) {


if ((e.keyCode || e.which) == 13) {
$('.EDetailInset').css('height', ((this.value.length + 1) * 3) + 'px');

}
else 
{
$('.EDetailInset').css('width', ((this.value.length + 1) * 11) + 'px');

}
});

【问题讨论】：

标签： jquery html textarea

【解决方案1】：

您可以将 +=15 作为参数传递给 css 函数。试试这个：

$('textarea').keyup(function(e) {

    if ((e.keyCode || e.which) == 13) {
        $('.EDetailInset').css('height', "+=30");
    }
    else {
        $('.EDetailInset').css('width', "+=30");
    }
});

如果你想做更高级的事情，我建议你阅读read this。

【讨论】：

当我按下回车键时，div 不会重置为最后一个字符。它从按 Enter 之前停止的位置开始增加。那是我不想要的。我想在输入时将宽度拉回最后一个字符。
您可以将最大行长度保留在变量中，并相应地设置文本区域的长度，如果您下次按 Enter 键时碰巧有更长的行，只需更新变量的值。跨度>
检查下面的答案并阅读我的最后评论。你能帮我做吗？

【解决方案2】：

试试这个它就像你希望它改变 textarea 到 div 一样工作，我使用 div 的高度和宽度来保持正确的高度/宽度 http://jsfiddle.net/NkRYY/9/

【讨论】：

感谢演示。但是然后尝试在输入第一行时按空格键。它不起作用。还有一件事。 Div 不会根据高度变化调整大小。它确实如此，但在第二次尝试时。有点可疑。
你能帮我这样做吗？我从第二行开始输入这样空格键就可以工作了，我可以只输入一行。这意味着禁用输入按钮并设置最大宽度，以便文本不超过它？