根据内容调整文本区域大小答案

【问题标题】：Resize text area based on content根据内容调整文本区域大小
【发布时间】：2013-11-29 15:01:27
【问题描述】：

我正在做一个项目，我需要在 c#/javascript 中的 google api 上添加包含大量文本的框。问题是当我输入更多文本时我的文本框不会调整大小。我正在使用文本区域执行此操作。唯一有效的时候是我将 contenteditable 放入 html 代码中。但是，我无法在 textarea 中正常输入。

这就是我此刻所拥有的。当文本比文本区域长时，我得到一个滚动条。我看过Autosizing textarea using Prototype，但这些解决方案不起作用。有谁知道我该如何解决这个问题？

我在 c# 标准网络浏览器中工作，这意味着它是 IE。

我的代码：

//begin css
.contextComment{
            height: auto;
            background:#ffffff;
            overflow:auto;
        }
        .textArea{
            margin-left: 2px;
            margin-top: 2px;
            display:inline-block;
            word-wrap: break-word;
            margin-bottom: 2px;
            position: relative;
            overflow-y:auto;           
        }
        textarea{
            border: none;
            border-color: transparent;
            height: 100%;
            overflow: hidden;
       }
//end css and start Javascript
function showCommentContextMenu(caurrentLatLng, indexPr) {
            var projection;
            contextmenuDir;
            projection = map.getProjection();
            $('.contextmenu').remove();
            contextmenuDir = document.createElement("div");
            contextmenuDir.className = 'contextmenu';

            contextmenuDir.innerHTML = "<div class='contextComment'><div class='textrea'><form action='' name='newTitleForm'><textarea type='text' onKeyPress='false' maxlength='1000' name='newTitle'>" + commentList[indexPr].text + "</textarea></div><div class='arrowImage'><input type='image' type='submit' alt='Verander de comment' onClick='changeComment(document.newTitleForm.newTitle.value, " + indexPr + ")' unselectable='on' src=" + arrow + "></form></div></div>";

            $(map.getDiv()).append(contextmenuDir);
            setMenuXY(caurrentLatLng);
            contextmenuDir.style.visibility = "visible";
        }

【问题讨论】：

标签： javascript resize textarea

【解决方案1】：

你可以试试this solution:

<script>
function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25+o.scrollHeight)+"px";
}
</script>

你所要做的就是通过传递你的文本区域来调用函数

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

再一次，这个解决方案来自here，不是我自己写的

【讨论】：