Как мне получить текст тега ввода для выравнивания по верху?

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 для него .Использование будет в основном таким же, как 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 для указания количества строк текста.