Textarea没有通过回车调整大小或扩大规模

时间:2016-03-17 05:25:34

标签: html css twitter-bootstrap textarea

当光标位于区域底部时,我的textarea不会扩展,我按返回创建一个新行。我可以在我的应用程序中扩展我的其他textareas,所以我认为它周围有一些元素阻止它在我键入时扩展/重新调整大小?有什么想法吗?

这是我的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>

这是带文字的文本区域

enter image description here

这是我回复几次之后的textarea(没有重新调整大小!)

enter image description here

2 个答案:

答案 0 :(得分:0)

糟糕!我注意到我在其他页面上有这个大小我的textarea

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

答案 1 :(得分:0)

在您的css文件中

将调整大小样式添加到您的textarea
喜欢这样:

Floating Action Button