Blazor:计算 Blazor 中文本区域中的字符数(不是 .js)

Question

我有一个输入文本区域，我限制了 (done) 上的字符数，我还想提供有关剩余字符数的视觉反馈。这是我的文本区域:

<textarea type="text" name="TheNameOfMyField" class="TheNameOfMyClass" value="" rows="2" maxlength="255"></textarea>

我可以在 .js 中做到这一点，没问题，但这种情况需要一个本地解决方案，尽管我很喜欢“答案”，但手指指向的资源可以让我问更少的问题同样欢迎 - 只是不是官方的 MS 文档，我需要它以在新环境中工作的 UI 开发人员可以理解的水平编写::grin::

此外，如果有人想对 Blazor UI 框架进行权衡(他们可能能够帮助自动化这样的任务——这是第一个我找不到至少部分答案的框架在线)，我有预算购买一个，但我没有时间测试几个，所以我目前没有(没有在 Blazor 工作的联系人，我认识的每个人都是 C++，. JS、PHP 等)。

如果我对我的目标不够清楚，这不是我(它是 .js 并且我需要一个 c# Blazor 解决方案)，但从概念上讲它非常接近 (除了我会限制字段中的字符数，所以没有负数):

https://www.itrelease.com/2011/05/count-characters-in-text-area-using-javascript/'

干杯!

Answer 1

您正在寻找这样的东西吗？

<textarea @bind="text"
          @bind:event="oninput"
          maxlength="@MAX_TEXT_COUNT" />
<label>Chars left: @(MAX_TEXT_COUNT - text.Count())</label>

@code {
    string text = "1234";
    const int MAX_TEXT_COUNT = 5;
}

@bind="text"和 @bind:event="oninput"将告诉 blazor 更新 text每次击键时的变量。 maxlength="@MAX_TEXT_COUNT"将阻止用户输入超过 MAX_TEXT_COUNT 的符号

<label>Chars left: @(MAX_TEXT_COUNT - text.Count())</label>只是打印出差异。

这是一个在线测试的片段:https://blazorrepl.com/repl/GYOrRkbb5532bvYW23