Question

我正在构建Razor Pages网络应用程序，并向其中添加了CRUD功能。在我的“创建”页面上，有一个表单来创建使用输入标签的条目。这些字段之一用于评论，因此显然需要更大。所以我给它添加了宽度和高度样式。但是，该文本仅出现在注释字段的中间，并且当文本到达该字段的末尾时，它不会自动换行。

Create.cshtml.cs

@page
@model HSLogApp.Pages.HSLogs.CreateModel

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Log</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            ....
            ....
            <div class="form-group">
                <label asp-for="Log.Comment" class="control-label"></label>
                <input asp-for="Log.Comment" class="form-control" style="height:250px; width:500px; vertical-align:top; white-space: pre-wrap;"/>
                <span asp-validation-for="Log.Comment" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

如何使光标刷新到顶部，以及如何将其包裹起来？

Answer 1

对于多行输入，请使用textarea元素。

有一个ASP.NET Core Tag Helper for it。用法与input大致相同。这是带有textarea的示例。

<div class="form-group">
    <label asp-for="Log.Comment" class="control-label"></label>
    <textarea asp-for="Log.Comment" rows="3" class="form-control"></textarea>
    <span asp-validation-for="Log.Comment" class="text-danger"></span>
</div>

现在使用rows中的textarea属性来指定文本的行数。

如何获得输入标签文本以使其与顶部对齐？

1 个答案: