防止在Blazor的输入中键入非数字

在Blazor应用程序中，我有一个

，我正在尝试做一些事情，以便不能在其中输入非数字字符

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

<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());
    }
}

@代码{
字符串输入内容；
字符串输入内容
{
get=>inputContent；
set=>inputContent=StripNonDigits（值）；
}
字符串条带非数字（字符串str）
{
返回新字符串（str.Where（c=>char.IsDigit（c））.ToArray（）；
}
}

现在，我想知道：

• 还有什么其他方法可以实现这一目标：“监控并可能修改用户在Blazor中输入的内容。”例如，不使用

  @bind

  可以实现这一目标吗
• 我的工作方式是否存在潜在问题？或者这是一个最优的解决方案

---

在JS中，要做同样的事情，您需要监听

oninput

事件，如果输入的字符不是数字，则执行

event.preventDefault（）

。就我所知，你不能在Blazor中完全做到这一点，对吗？

也许验证的东西可以帮助你？ 通常它在提交时触发，但下面介绍了如何使用从InputText继承的新输入组件在输入时触发：

@*继承自原始InputText组件*@
@继承InputText
@*绑定oninput事件*@

然后，您可以使用正则表达式不允许使用数字：

@using System.ComponentModel.DataAnnotations;

<EditForm Model="example">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputTextOnInput @bind-Value="example.Name"></InputTextOnInput>
    <button type="submit">Submit</button>
</EditForm>


@code {

public class ExampleModel
{
    [Required]
    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",
     ErrorMessage = "Characters are not allowed.")]
    public string Name { get; set; }
}

public ExampleModel example = new ExampleModel();

@使用System.ComponentModel.DataAnnotations；
提交
@代码{
公共类示例模型
{
[必需]
[正则表达式（@“^[a-zA-Z'-'\s]{1,40}$”，
ErrorMessage=“不允许使用字符。”）]
公共字符串名称{get；set；}
}
public ExampleModel example=新ExampleModel（）；

}

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

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

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

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

原因2：无法通过关联菜单阻止复制粘贴（右键单击=>粘贴） 无可奉告：

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

原因4：仅适用于英文数字 无可奉告：

原因5：文本中间部分不可编辑（重要！） 无可奉告：

注意：你可以在这把小提琴中看到所有这些行为：

理由6：使用正则表达式 正则表达式速度慢、效率低，而且通常很难读取和解析。因此，应尽可能避免这种情况

理由7：复杂得多，不那么优雅 说真的，无可奉告，很明显

原因8：需要更多的代码行 仅考虑@code部分，这个由@enet提出的解决方案大约是23行代码，而我的大约是12行。（两者都考虑到一条线上的花括号等）

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

最佳解决方案： 这就是为什么我最初在原始问题中提出的解决方案是最理想、最优雅的解决方案

解决了上述所有问题，而且代码行更少，更容易理解、更短、更好、更简单

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

下面的GIF演示了这一点：

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

---

为什么不能使用input type=“number”？@MisterMagoo虽然不能阻止用户输入非数字，但您仍然可以在

input type=“number”

中键入“.”等字符。此外，还有一些其他原因，例如，如果滚动“input type=“number”，则数字会上下浮动这可能是不可取的，如果数字代表的东西，如信用卡号码等，但它确实阻止这些类型的字符到达您的代码。你想解决的真正问题是什么？@MisterMagoo我不是第一个想建立这样一个输入字段的人，例如。这不是什么新鲜事，我只是想知道如何在Blazor中做到最好

@using System.ComponentModel.DataAnnotations;

<EditForm Model="example">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <InputTextOnInput @bind-Value="example.Name"></InputTextOnInput>
    <button type="submit">Submit</button>
</EditForm>


@code {

public class ExampleModel
{
    [Required]
    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",
     ErrorMessage = "Characters are not allowed.")]
    public string Name { get; set; }
}

public ExampleModel example = new ExampleModel();