使用 bootstrap 在 MVC 中自动调整多行编辑器的高度

Question

我有下面的多行编辑器，当用户开始使用 bootstrap 在不同的行中添加多个电子邮件地址时，我需要自动调整高度。非常感谢任何代码示例。

型号：

     [DataType(DataType.MultilineText)] 
     public string AdditionalEmailAddressesText { get; set; }

查看：

<div class="form-group">
        @Html.LabelFor(m => m.AdditionalEmailAddressesText, new { @class = "col-sm-2 control-label" })
        <div class="col-sm-10">
            @Html.EditorFor(m => m.AdditionalEmailAddressesText, new { htmlAttributes = new { @class = "form-control", placeholder = @Strings.Porting_AdditionalEmailAddressesSubtext } })
            @Html.ValidationMessageFor(m => m.AdditionalEmailAddressesText)
        </div>
    </div>

Answer 1

对于textarea标签，没有auto-height属性来自动调整高度。对于 [DataType(DataType.MultilineText)] 注释，它也不提供设置行和列的功能。所以你必须编写脚本代码来添加oninput事件监听器来改变样式。

@model NewEvent

<h1>@ViewData["Title"]</h1>

<p>Use this page to detail your site's privacy policy.</p>
<div class="form-group">
        @Html.LabelFor(m => m.Body, new { @class = "col-sm-2 control-label" })
        <div class="col-sm-10">
            @Html.EditorFor(m => m.Body, new { htmlAttributes = new { @class = "form-control", placeholder = "placeholder" } })
            @Html.TextAreaFor(model => model.Body, new {cols = 2, rows = 5})
            @Html.ValidationMessageFor(m => m.Body)
        </div>
    </div>
    @section scripts {

    <script>
        $("#Body").each(function () {
          this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
        }).on("input", function () {
          this.style.height = "auto";
          this.style.height = (this.scrollHeight) + "px";
        });
    </script>
    }

使用 bootstrap 在 MVC 中自动调整多行编辑器的高度

Auto Adjust height of multiline editor for in MVC using bootstrap

twitter-bootstrap-3

asp.net-core-mvc