當其中一個改變時，匹配兩個文本區域元素的大小

我有一個小型的HTML頁面，其中有兩個并排的textarea元素。其中一個啟用了輸入功能，另一個是只讀的，并動態地顯示第一個的預覽（用于一些自定義的模板處理）。

我希望兩個textarea元素總是有相同的高度，并且在使用大小調整的情況下，它們能與另一個相匹配。我沒有使用 jQuery 或任何花哨的 JS 框架，但我使用了 Bootstrap 5。

這可以用普通的JS來完成嗎？

這是我對兩個textareas的代碼：

<div class="row">/span>
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"/span>>
            < textarea class="form-control"/span> id="note_content" style="height: 300px"></textarea>>
            < label for="note_content" class="form-label" > 注意內容模板（你可以在這里使用書籍引數！）。 )</label>
        </div>/span>
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"/span>>
            < textarea class="form-control"/span> id="note_content_preview"  style="height: 300px" placeholder="preview" disabled></textarea> 
            < label for="note_content_preview" class="form-label" > 注意內容預覽</label>。
        </div>/span>
    </div>/span>

uj5u.com熱心網友回復：

你可以使用一個resize observer來監聽你的主textarea元素的大小變化，然后根據第一個元素的高度/寬度來調整第二個textarea元素的高度，每當它調整大小時就抓取其高度/寬度：

const note = document. getElementById("note_content") 。
const preview = document.getElementById("note_content_preview") 。

const resizeObserver = new ResizeObserver(() =>  {
 preview.style.height = note.offsetHeight   "px";
 preview.style.width = note.offsetWidth   "px";
});
resizeObserver.observe(note);

< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/span> rel="styleheet" integrity="sha384- EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"/span>> 
<div class=" row">
  <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"/span>>
    < textarea class="form-control"/span> id="note_content" style="height: 300px"></textarea>>
    < label for="note_content" class="form-label" > 注意內容模板（你可以在這里使用書籍引數！）。 )</label>
  </div>/span>
  <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"/span>>
    < textarea class="form-control"/span> id="note_content_preview"  style="height: 300px" placeholder="preview" disabled></textarea> 
    < label for="note_content_preview" class="form-label" > 注意內容預覽</label>。
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

如果你只是想讓文本區在其中一個被調整時匹配，你不需要任何自定義JS或CSS。在你的標記中使用flexbox(d-flex flex-column)來使textareas的高度增長flex-grow-1...

<div class="row"> 
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1 d-flex flex-column">/span>
            < textarea class="form-control flexible-grow-1" id="note_content"/span> style="height: 300px"></textarea>>
            < label for="note_content" class="form-label" > 注意內容模板（你可以在這里使用書籍引數！）。 )</label>
        </div>/span>
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1 d-flex flex-column" >
            < textarea class="form-control flex-grow-1" id="note_content_preview" placeholder="preview" disabled> </textarea>>
            < label for="note_content_preview" class="form-label" > 注意內容預覽</label>。
        </div>/span>
    </div>/span>

如果你還想讓第一個textarea根據其內容調整大小，請使用一個輸入處理器。

/* this is used to make 1st textarea resize to its content upon input */
const note_content = document.getElementById("note_content"/span>)
note_content.addEventListener("input", function(>/span>) {
    this.style.height = "auto"。
    this.style.height = （this.scrollHeight)   "px"。
}, false)

https://codeply.com/p/scxO6z78dd

uj5u.com熱心網友回復：

const noteContentElement = document. getElementById("note_content") 。
const noteContentPreviewElement = document.getElementById("note_content_preview") 。
noteContentElement.addEventListener('keyup', function(){
noteContentElement.style.height = (noteContentElement.scrollHeight > noteContentElement.clientHeight) ? (noteContentElement.scrollHeight) "px"/span> : noteContentElement. style.height "px"。
noteContentPreviewElement.style.height = noteContentElement.style.height。
noteContentPreviewElement.value = noteContentElement.value。
});

//Credits: https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length

.col-6{
width: 40%;
margin: 10px;
display: inline-block;
vertical-align: top;
}
.col-6 label{
display:block;
}
textarea{
overflow: hidden;
}

<div class="row"> /span>
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"/span>>
            < textarea class="form-control" id="note_content" > </textarea>>
            < label for="note_content" class="form-label" > 注意內容模板（你可以在這里使用書籍引數！）。 )</label>
        </div>/span>
        <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"/span>>
            < textarea class="form-control"/span> id="note_content_preview" placeholder="preview" disabled> </textarea>>
            < label for="note_content_preview" class="form-label" > 注意內容預覽</label>。
        </div>/span>
    </div>/span>

標籤：

上一篇：使用css在按鈕旁邊添加加載影像

下一篇：有什么方法可以在<body>標簽內修改正在顯示的變數？