Textarea 不使用回车调整大小或扩展答案

【问题标题】：Textarea not resizing or expanding with carriage returnTextarea 不使用回车调整大小或扩展
【发布时间】：2016-03-17 05:25:33
【问题描述】：

当我的光标位于区域底部并且按回车键创建新行时，我的文本区域没有扩展。我可以在我的应用程序中扩展我的其他一些文本区域，所以我认为它周围有一些元素阻止它在我输入时扩展/重新调整大小？有什么想法吗？

这是我的html和渲染的html

<div class="form-group">
     @Html.LabelFor(model => model.OverviewSummary, new { @class = "control-label" })
     <form id="OverviewSummarySubmit">
          @Html.TextAreaFor(model => model.OverviewSummary, new { @class = "form-control input-lg", @style = "min-height: 64px; max-height: 460px; max-width: 500px; overflow: hidden", data_id = Model.YogaSpaceId, data_url = Url.Action("UpdateSummary", "ManageSpaces") })
          @Html.ValidationMessageFor(model => model.OverviewSummary, "", new { @class = "text-danger", @style = "font-weight: bold;" })
     </form>
</div>



<textarea name="OverviewSummary" class="form-control input-lg valid" id="OverviewSummary" aria-invalid="false" aria-describedby="OverviewSummary-error" style="height: 90px; overflow: hidden; min-height: 64px; max-height: 460px; max-width: 500px;" rows="2" cols="20" data-val="true" data-id="3" data-val-maxlength-max="1500" data-val-maxlength="Maximum Length 1500 Characters." data-url="/ManageSpaces/3/UpdateSummary">This is at Alamo Square Park near Hayes Valley. The cat jumped over the roof to get the mouse.
I like trees!
When I jump its high!
</textarea>

这是带有文本的文本区域

这是我按回车几次后的文本区域（没有调整大小！）

【问题讨论】：

textarea 不会自行调整大小，您需要为此使用一些 JavaScript。见stackoverflow.com/questions/7477/…

标签： html css twitter-bootstrap textarea

【解决方案1】：

哎呀！我注意到我在其他调整我的文本区域大小的页面上有这个

$('textarea').on('input', function () {
    $(this).outerHeight(20).outerHeight(this.scrollHeight);
});
$('textarea').trigger('input');

【讨论】：

【解决方案2】：

在您的 css 文件中将调整大小样式放入您的文本区域
像这样：

<style>
    textarea{resize:both;}
</style>

【讨论】：

@user1186050 你的 textarea 标签有样式 attr，你应该在其中添加这个 resize:both;。