Question

我当前正在创建一个站点，管理员可以在该站点中进入“编辑器”模式，从而使他们可以在该站点上的任何位置编辑任何文本。

在更新文本模块的表单中，我有一个<textarea>。

（由于PHP回显而采用这种格式）

<textarea oninput='this.style.height = \"\";this.style.height = this.scrollHeight + \"px\"' rows='1'id ='".$phrase."' name='". $phrase ."'>".$query."</textarea>

我那里有一个脚本，因此在键入文本区域时，它会动态扩展以匹配内容。

oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'

这很好用，但是错误是，当我加载页面时，所有textarea都默认显示为1行。我知道已经设置了rows = '1'，但是我需要这样做，因为1行元素将在下面具有不必要的空间。如果我选择模块，然后键入它，它们将对齐到正确的行。但是我希望这是自动的，模块要自动假定其动态高度。

为此，我认为我需要以某种方式刷新文本区域。我尝试使用.append()向其中添加文本，然后在页面加载后将其删除，从而刷新了textarea，但是我无法完全使它起作用。

理想情况下，我想将其默认为第二个版本。有可能吗？

$('textarea').on('keydown', function(event) {
        if (event.keyCode == 13){
        if (!event.shiftKey) {
            event.preventDefault();
            this.form.submit();
            $('#selector').submit();
        }
        }
        });
   
   // THIS IS THE ANSWER
    $("textarea").each( function( i, el ) {
        $(el).height( el.scrollHeight );
        });

textarea.submitFunc {
        overflow: hidden;
        margin: inherit !important;
        outline: inherit !important;
        background: inherit !important;
        color: inherit !important;
        resize: none;
        text-transform: inherit !important;
        text-align: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        padding: inherit !important;
        display: block;
        line-height: inherit !important;
        font-size: inherit !important;
        vertical-align: bottom;
        float: inherit !important;
        min-height: 30px;
      }
      
      textarea.submitFunc:focus {
          border: 1px solid black;
          resize: both;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='submitFunc' oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"' id ='selector' name='selector'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dignissim neque, quis varius lacus. Proin molestie quam eget velit tristique, sed facilisis orci auctor. Phasellus tincidunt nisl a sem egestas facilisis a ut elit. Proin molestie elit vel justo semper, nec luctus est pellentesque. Nam felis felis, fermentum id quam eu, suscipit lobortis justo. Cras ac est dignissim, hendrerit odio nec, vehicula sem. Curabitur mattis dolor elementum eros lobortis placerat. In hac habitasse platea dictumst.</textarea>

页面加载：

输入句点后：

Answer 1

您可以使用以下代码尝试在页面加载时更改文本区域的高度。

(() => {
    const element = document.querySelector("#id-of-the-textarea");
    element.style.height = element.scrollHeight + "px";
})();

Answer 2

此代码选择页面上的每个文本区域，并将框包装到内容。完美的解决方案位于https://stackoverflow.com/a/13085718/5451731

$("textarea").each( function( i, el ) {
    $(el).height( el.scrollHeight );
});

刷新Div的内容

2 个答案: