Blazor中日益增长的TextArea [英] Growing TextArea in Blazor
问题描述
我需要一个随着行数增加而增加的文本区域.删除行后,TextArea应该会再次缩小.最好是最大高度.
I need a text area that grows as the number of lines increases. As soon as lines are deleted, the TextArea should shrink again. In the best case with a maximum height.
它如何与Javascript一起工作我已经在这里阅读了: > textarea-to-resize-based-on-content-length
How it works with Javascript I could already read here: textarea-to-resize-based-on-content-length
但是不幸的是,据我所知,在Blazor中,TextArea没有可用的"scrollHeight".
But in Blazor I have unfortunately, as far as I know, no "scrollHeight" available for the TextArea.
(我的问题与 Blazor框架有关,使用C#(+ HTML/CSS)而不是WPF/WinForms等桌面UI的浏览器前端开发.
(My problem relates to the Blazor framework, which allows browser frontend development using C# (+HTML/CSS) and not a desktop UI like WPF/WinForms.)
推荐答案
只要您知道文本中有多少行,就可以像这样使用TextView上的行"属性
As long as you know how many lines are in your text, you can just use the "rows" attribute on the TextView, like this
<textarea rows="@Rows"
@bind-value="MyText"
@bind-value:event="oninput" />
在代码中,您可以确定Rows的值
And in your code, you can determine the value for Rows
请注意,我使用Math.Max(Rows,2)至少保留两行.
Note, I use Math.Max(Rows,2) to keep a minimum of two rows.
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方法
I call CalculateSize from code that handles changes to "MyText" - either a custom setter like this or A.N.Other method
string _myText;
protected string MyText
{
get => _myText;
set
{
_myText = value;
CalculateSize(value);
}
}
通过设计方法的CSS或在CalculateSize方法中添加另一个约束,可以轻松设置最大高度.
The maximum height can easily be set either through CSS for a design approach or by adding another constraint to the CalculateSize method.
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了.)
Option 2
If you want simplicity and don't mind a bit of inline JS (if you do, then it's time to crack open the 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文件中并将其包含在页面中.
Option 3
If you did want to use JSInterop, you could do something like this or place your code in a JS file and include it in the page.
<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);
}
}
这篇关于Blazor中日益增长的TextArea的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!