在 Blazor 中增加 TextArea

Question

我需要一个随着行数的增加而增长的文本区域。删除行后，TextArea 应该会再次缩小。在最大高度的最佳情况下。

它如何与 Javascript 一起使用我已经可以在这里阅读： textarea-to-resize-based-on-content-length

但不幸的是，据我所知，在 Blazor 中，TextArea 没有可用的 "scrollHeight"。

（我的问题与 Blazor framework 有关，它允许使用 C# (+HTML/CSS) 而不是像 WPF/WinForms 这样的桌面 UI 进行浏览器前端开发。）

Answer 1

只要你知道你的文本有多少行，你就可以在 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 - 像这样的自定义 setter 或 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);
}

选项 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);
}
}

在 Blazor 中增加 TextArea

Growing TextArea in Blazor

c#

blazor

blazor-client-side

选项 2

选项 3