javascript - 刷新div的内容

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"'

这完美地工作，但错误是，当我加载页面时，所有文本区域默认显示为 1 行。我知道这rows = '1'是设置的，但我需要它，因为 1 行元素下面会有不必要的空间。如果我选择模块然后输入它，它们会捕捉到正确的行。但我希望这是自动的，因为模块自动假设它们的动态高度。

为此，我假设我需要以某种方式刷新 textarea。我尝试使用.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>

在页面加载时：

输入句号后：

标签： javascripthtmljquery

Answer 1

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

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