Estoy creando una página de afeitar y estoy usando diferentes pestañas con textares de tamaño automático. He seguido la solución enumerada como Opción 2 en este enlace: Creación de un área de texto con cambio de tamaño automático Y se ve así:
<script type="text/javascript"> const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); tx[i].addEventListener("input", OnInput, false); } function OnInput() { this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; } </script>Esta solución solo cambia el tamaño de las áreas de texto visibles. Si tengo un área de texto en otra pestaña en la misma vista, el área de texto no cambiará de tamaño hasta que haya escrito algo en el área de texto.
Se sugiere utilizar:
$("textarea").trigger("input");Pero no puedo conseguir que haga nada.
Estas son las pestañas que se pueden hacer clic:
<ul id="viewTabs" class="nav nav-tabs" style="margin-left:5px;"> @*Create tabs*@ @foreach (var tab in tabs) { <li class ="TabClickable" @(tab.Index == 1 ? "class=active" : "")> <a data-toggle="tab" href="#tab@(tab.Index.ToString())"> <span class="tabtitle"> @Html.Raw(tab.Name) </span> </a> </li> } </ul>Y el código que genera un área de texto se ve así.
@Html.TextAreaFor(model => model.Field.InstCustomFieldValues.Where(icfv => icfv.InstrumentId == Model.Instrument.Id).FirstOrDefault().String_Value, 1, 40, new { id = Model.Field.FieldName, Name = Model.Field.FieldName, @class = "form-control" })La cuestión
Todas las áreas de texto que no son visibles en la página tendrán una altura predeterminada de 0. Cuando cambia de pestaña y el área de texto se vuelve visible, la altura sigue siendo 0.
La solución
Debe volver a aplicar el cambio de tamaño del área de texto al área de texto DESPUÉS de que se haga visible.
Te recomiendo que hagas esto de una de dos maneras:
1. Reinicie toda la función cuando haga clic en el elemento que hace visible el área de texto.
(Tenga en cuenta que no he probado este código. Está fuera de mi cabeza).
document.addEventListener("DOMContentLoaded", function(event) { resizeTx(); }); function resizeTx() { const tx = document.getElementsByTagName("textarea"); for (let i = 0; i < tx.length; i++) { tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); tx[i].addEventListener("input", OnInput, false); } } function OnInput() { this.style.height = "auto"; this.style.height = (this.scrollHeight) + "px"; } const tab = document.getElementsByClassName("TabClickable > a"); for (let i = 0; i < tx.length; i++) { tab[i].addEventListener("click", resizeTx, false); }2. Active la entrada del área de texto ahora visible.
const tab = document.getElementsByClassName("TabClickable > a"); for (let i = 0; i < tx.length; i++) { tab[i].addEventListener("click", goTextarea, false); } function goTextarea() { tx.dispatchEvent(new Event("input")); }Debe tener en cuenta que es mucho más fácil hacer esto en jQuery como sugiere la respuesta vinculada.
$(".TabClickable > a").on("click", function(){ $("textarea").trigger("input"); });