0
131
ViewsHaga coincidir el tamaño de dos elementos de área de texto cuando uno de ellos cambia
Tengo una pequeña página HTML con dos elementos de área de textarea uno al lado del otro. Uno está habilitado para la entrada y el otro es de solo lectura y muestra dinámicamente una vista previa del primero (para el procesamiento de algunas plantillas personalizadas).
Quiero que textarea elementos del área de texto tengan siempre la misma altura y que coincidan entre sí si el uso cambia de tamaño. No estoy usando jQuery ni ningún marco JS elegante, aunque estoy usando Bootstrap 5.
¿Se puede hacer esto con vainilla JS?
Este es mi código para los dos textarea s:
<div class="row"> <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"> <textarea class="form-control" id="note_content" style="height: 300px"></textarea> <label for="note_content" class="form-label">Note content template (you can use book parameters here!)</label> </div> <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"> <textarea class="form-control" id="note_content_preview" style="height: 300px" placeholder="preview" disabled></textarea> <label for="note_content_preview" class="form-label">Note content preview</label> </div> </div>3 answers
Answer question0
Puede usar unobservador de cambio de tamaño para escuchar los cambios de tamaño en su elemento de área de texto principal y luego ajustar la altura de su segundo elemento de área de texto en función de la altura/ancho del primer elemento tomando su altura/ancho cada vez que cambia de tamaño:
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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="row"> <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"> <textarea class="form-control" id="note_content" style="height: 300px"></textarea> <label for="note_content" class="form-label">Note content template (you can use book parameters here!)</label> </div> <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"> <textarea class="form-control" id="note_content_preview" style="height: 300px" placeholder="preview" disabled></textarea> <label for="note_content_preview" class="form-label">Note content preview</label> </div> </div>0
Si simplemente desea que las áreas de texto coincidan cuando se cambia el tamaño , no necesita ningún JS o CSS personalizado. En su marcado, use flexbox ( d-flex flex-column ) para hacer que las áreas de texto crezcan en altura flex-grow-1 ...
<div class="row"> <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" style="height: 300px"></textarea> <label for="note_content" class="form-label">Note content template (you can use book parameters here!)</label> </div> <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">Note content preview</label> </div> </div>Si también desea que la primera área de texto cambie de tamaño a su contenido, use un controlador de entrada.
/* this is used to make 1st textarea resize to its content upon input */ const note_content = document.getElementById("note_content") note_content.addEventListener("input", function(){ this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; }, false)0
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" : 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"> <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"> <textarea class="form-control" id="note_content"></textarea> <label for="note_content" class="form-label">Note content template (you can use book parameters here!)</label> </div> <div class="col-6 mb-3 form-floating mt-3 ml-auto gx-1"> <textarea class="form-control" id="note_content_preview" placeholder="preview" disabled></textarea> <label for="note_content_preview" class="form-label">Note content preview</label> </div> </div>