在 Blazor 中增加 TextArea

Posted 2023-05-07

【中文标题】在 Blazor 中增加 TextArea

【英文标题】：Growing TextArea in Blazor

【发布时间】：2020-01-29 19:59:41

【问题描述】：

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

它是如何与 javascript 一起工作的，我已经在这里读到了： textarea-to-resize-based-on-content-length

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

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

【问题讨论】：

@Oswald 您链接的问题与 Blazor 中的控件大小无关。

【参考方案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 - 像这样的自定义设置器或 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);

【讨论】：

我也尝试了与您在此处描述的解决方案类似的解决方案。我还计算了换行符并从中创建了行。问题是在编写比 TextArea 长的行时没有换行符。见这里：gifyu.com/image/kKPL

我真的希望它已经可以在没有 JS 的情况下工作。也许在未来。非常感谢您的帮助！选项 2 是我的选择。

选项 2 仅适用于 oninput，当 textarea 以其初始值加载时，它将始终有 2 行。我还没有找到解决这个问题的方法。

@tocqueville 将 textarea 上的 rows 属性更改为 1 以修复初始两行

我不是在寻找这个答案，但我喜欢你如何使用eval 来调用一些javascript，这太好了。谢谢！