Question

我正在开发一个项目，我需要在c＃/ javascript中添加包含google api上大量文本的框。问题是当我输入更多文本时，我的文本框不会调整大小。我正在用文本区域做这个。它唯一有效的时候是我在html代码中提出了contenteditable。但是，我不能在我的文本区域中输入正常的内容。

enter image description here

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

我在c＃标准webbrowser中工作，这意味着它是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

您可以尝试this solution：

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

您所要做的就是通过传递textarea

来调用该函数

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

同样，这个解决方案来自here，我自己没有写过

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

1 个答案: