我需要一个随着行数增加而增长的文本区域。删除行后,TextArea 应再次缩小。在最好的情况下具有最大高度。
它如何与 Javascript 一起使用我已经可以在这里阅读:textarea-to-resize-based-on-content-length
但不幸的是,在 Blazor 中,据我所知,TextArea 没有可用的“scrollHeight”。
(我的问题与Blazor 框架有关,它允许使用 C#(+HTML/CSS)而不是像 WPF/WinForms 这样的桌面 UI 进行浏览器前端开发。)
只要你知道你的文本有多少行,你就可以在 TextView 上使用“rows”属性,就像这样
<textarea rows="@Rows"
@bind-value="MyText"
@bind-value:event="oninput" />
在您的代码中,您可以确定 Rows 的值
注意,我使用 Math.Max(Rows,2) 来保持最少两行。
private void CalculateSize(string value)
{
Rows = Math.Max(value.Split('\n').Length, value.Split('\r').Length);
Rows = Math.Max(Rows, 2);
}
我从处理“MyText”更改的代码中调用CalculateSize - 像这样的自定义设置器或其他方法
string _myText;
protected string MyText
{
get => _myText;
set
{
_myText = value;
CalculateSize(value);
}
}
可以通过 CSS 为设计方法轻松设置最大高度,也可以通过向 CalculateSize 方法添加另一个约束来轻松设置。
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);
}
如果你想要简单并且不介意一些内联 JS(如果你这样做,那么是时候打开 JSInterop ....)
<textarea
rows="2"
placeholder="Sample text."
style="resize:both;"
oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';">
</textarea>
如果您确实想使用 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);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句