根據內容調整文本區域的大小

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>

同樣，此解決方案來自這里 ，我自己沒有寫