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

Question

我正在一个项目中，我需要在c＃/ javascript中的Google api上添加包含很多文本的框。 问题是当我输入更多文本时，我的文本框不会调整大小。 我正在用文本区域执行此操作。 唯一有效的时间是当我将contenteditable放入html代码中时。 但是，我不能在我的文本区域中键入normaly。

这就是我目前所拥有的。 当文本比文本区域长时，我得到一个滚动条。 我已经看过使用Prototype自动调整textarea的大小，但是这些解决方案不起作用。 有人知道我该如何解决吗？

我在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";
        }

Answer 1

您可以尝试以下解决方案 ：

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

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

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

同样，此解决方案来自这里 ，我自己没有写