blazor - 防止在 Blazor 中输入非数字

Question

在 Blazor 应用程序中，我有一个<input type="text" />并且我正在尝试做一些事情，以便无法将非数字字符输入其中。

这就是我到目前为止所做的，它似乎工作得很好：

<input type="text" @bind="InputContent" @bind:event="oninput" />

@code {
    string inputContent;
    string InputContent
    {
        get => inputContent;
        set => inputContent = StripNonDigits(value);
    }

    string StripNonDigits(string str)
    {
        return new String(str.Where(c => char.IsDigit(c)).ToArray());
    }
}

现在，我想知道：

• 还有什么其他方法可以实现这个目标：“监控并可能修改用户输入的内容，特别是在 Blazor 中。” 例如，这可以在不使用的情况下实现@bind吗？
• 我这样做的方式是否存在潜在问题？或者它是一个最佳解决方案？

在 JS 中，做同样的事情，你会监听oninput事件，如果输入的字符不是数字，你就做一个event.preventDefault(). 据我所知，你不能在 Blazor 中完全做到这一点，对吗？

标签： blazorblazor-server-sideblazor-webassembly

Answer 1

不可靠的解决方案：

这就是为什么@enet 提出的解决方案实际上非常不可靠、有缺陷、效率低下和幼稚。+ 为什么他声称我的解决方案有问题实际上是错误的。

更新：他删除了他的答案。

首先，他的解决方案不优雅的原因：

原因1：无法通过快捷键（Ctrl/CMD + V）阻止复制粘贴

没有意见：

原因 2：无法通过上下文菜单阻止复制粘贴（右键单击 => 粘贴）

没有意见：

原因3：无法阻止文本的拖放

没有意见：

原因 4：仅适用于英文数字

没有意见：

原因5：文本中间不可编辑（重要！）

没有意见：

注意：您可以在这个小提琴中看到所有这些行为：https ://blazorfiddle.com/s/xfik4hnq

原因 6：使用 RegEx

RegEx 速度慢、效率低，而且通常难以阅读和解析。因此，应尽可能避免。

原因 7：更复杂，更不优雅

说真的，没有评论，很明显。

原因 8：需要更多的代码行

仅考虑@code 部分，@enet 提出的这个解决方案大约有 23 行代码，而我的大约是 12 行。（都考虑一行上的花括号等）

注意：同样重要的是要记住，如果这个解决方案几乎和我最初提出的那个一样健壮（我会稍微解释一下），它必须解决每一个问题刚刚演示过，为了做到这一点，它必须变得比现在复杂得多，而且还需要更多的代码行。

最佳解决方案：

这就是为什么我最初在最初的问题中提出的解决方案是最优化和优雅的解决方案；

解决了所有上述问题，而且它还用更少的代码行+ 更容易理解、更短、更好和更简单的代码来解决。

同时，另一方提出的唯一支持另一种解决方案和反对我的解决方案的论点是，我的解决方案导致不允许的字符出现几分之一秒，然后消失。但是，在我的任何测试中都没有观察到这一点。

这是一个演示这一点的 GIF：

每当我按下键盘上的某个键时，您都可以在控制台上看到一条消息，例如“按下键：a”，但同时，您会看到该字符根本没有出现在输入中：