Мне нужна текстовая область, которая растет как количество строк увеличивается. Как только строки будут удалены, текстовая пара следует уменьшить. В лучшем случае с максимальной высотой.
Как это работает с JavaScript, я уже мог читать здесь: Textarea-over-insize-on-on-content-denglish
Но в Blazor у меня к сожалению, насколько я знаю, для текстиреа нет «Scrollheight».
(Моя проблема относится к blazor framework, которая позволяет разработку браузера Frontend Используя C # (+ HTML / CSS), а не настольный интерфейс, такой как WPF / WinForms.)
1 ответ
Пока вы знаете, сколько строк в вашем тексте, вы можете просто использовать атрибут «Rows» на TextView, как это
<textarea rows="@Rows"
@bind-value="MyText"
@bind-value:event="oninput" />
И в вашем коде вы можете определить значение для рядов
Примечание, я использую Math.max (строки, 2), чтобы сохранить минимум два ряда.
private void CalculateSize(string value)
{
Rows = Math.Max(value.Split('\n').Length, value.Split('\r').Length);
Rows = Math.Max(Rows, 2);
}
Я звоню, рассчитанный из кода, который обрабатывает изменения в «MyText» - либо пользовательскую установку, такую, либо метод, либо метод.
string _myText;
protected string MyText
{
get => _myText;
set
{
_myText = value;
CalculateSize(value);
}
}
Максимальная высота может быть легко установлена либо через CSS для подхода дизайна, либо путем добавления другого ограничения в метод рассчитанного.
private void CalculateSize(string value)
{
Rows = Math.Max(value.Split('\n').Length, value.Split('\r').Length);
Rows = Math.Max(Rows, MIN_ROWS);
Rows = Math.Min(Rows, MAX_ROWS);
}
Вариант 2
Если вы хотите простоту и не против немного встроенных JS (если вы сделаете, то пришло время взломать jsinterop ....)
<textarea
rows="2"
placeholder="Sample text."
style="resize:both;"
oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';">
</textarea>
Вариант 3
Если вы хотели использовать jsinterop, вы можете сделать что-то вроде этого или поместите свой код в файле JS и включите его на страницу.
<textarea id="MyTextArea"
rows="2"
placeholder="Sample text."
@oninput="Resize"></textarea>
<label>This area is @(MyHeight)px</label>
@code
{
[Inject] IJSRuntime JSRuntime { get; set; }
double MyHeight=0;
async Task Resize()
{
var result = await JSRuntime.InvokeAsync<object>("eval",@"(function() {
MyTextArea.style.height='auto';
MyTextArea.style.height=(MyTextArea.scrollHeight)+'px';
return MyTextArea.scrollHeight;
})()");
Double.TryParse(result.ToString(), out MyHeight);
}
}
Похожие вопросы
Связанные вопросы
Новые вопросы
c#
C # (произносится как «резкий») - это высокоуровневый, статически типизированный язык программирования с несколькими парадигмами, разработанный Microsoft. Код C # обычно нацелен на семейство инструментов и сред выполнения Microsoft .NET, включая, среди прочего, .NET Framework, .NET Core и Xamarin. Используйте этот тег для вопросов о коде, написанном на C # или в формальной спецификации C #.