为什么如果打开popup，theTextarea小于文本呢？

Question

我有文字区域：

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

textarea#commentText {
        height: auto;
        width: 570px!important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<textarea name="bookId" id="commentText" value="" class="form-control" ng-maxlength="1000" maxlength="1000" rows="3" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>


        

如果我打开弹出窗口，我会得到这样的结果：

打开时如何制作所需的textarea尺寸？ 我在css中指定了自动尺寸但没有发生任何事情。

Answer 1

您也可以在文档准备就绪上运行该功能：

＆＃13;

＆＃13;

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

// this will run on first load
(function() {
   textAreaAdjust(document.getElementById('commentText'));
})();

＆＃13;

textarea#commentText {
  height: auto;
  width: 570px!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<textarea name="bookId" id="commentText" value="" class="form-control" ng-maxlength="1000" maxlength="1000" rows="3" onkeyup="textAreaAdjust(this)" style="overflow:hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius lorem sed metus lacinia, et tempor odio posuere. Cras dictum, odio et tristique iaculis, tellus tortor molestie sapien, at pharetra quam quam in enim. Nunc placerat quam vitae elit maximus ornare. Aenean dapibus, purus a tincidunt fermentum, diam est aliquam orci, eu laoreet nulla est sed leo. Ut laoreet facilisis feugiat. Mauris tortor tortor, iaculis ut mi sit amet, consectetur gravida sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer sed fermentum turpis. Cras ac libero at augue rutrum sagittis sit amet vitae magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at odio odio. Cras porttitor sit amet odio eu imperdiet. Vestibulum dignissim tempus rutrum.</textarea>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里使用这个。而不是使用 onkeyup 在textarea上使用 onfocus 。当您使用javascript打开弹出窗口时手动触发焦点。以前它只在触发keyup事件时才起作用。

document.getElementById("commentText").value = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";

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

document.getElementById("commentText").focus();

textarea#commentText {
        height: auto;
        width: 570px!important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<textarea name="bookId" id="commentText" value="" class="form-control" ng-maxlength="1000" maxlength="1000" rows="3" onfocus="textAreaAdjust(this)" style="overflow:hidden"></textarea>