只要您知道文本中有多少行,您就可以使用 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 - 无论是像这样的自定义设置器还是A.N.Other方法
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);
}
Option 2
如果您想要简单性并且不介意一些内联 JS(如果您这样做,那么是时候破解 JSInterop...)
<textarea
rows="2"
placeholder="Sample text."
style="resize:both;"
oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';">
</textarea>
Option 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);
}
}