Blazor - 如何防止文本框 (InputText) 中出现非数字字符？

Question

我在 blazor 中有一个 InputText，我想阻止非数字字符，执行此操作的基本 razor 和 C# 代码是什么？这就是我需要它工作的方式，用户输入一个字符，它会拒绝输入所有内容并显示一条验证消息，说明只允许使用数字。到目前为止，我已经尝试使用正则表达式的数据表示法范围属性，但这并不拒绝非数字字符。

Answer 1

这实际上是一个 html/javascript 的事情。添加

onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"

添加到您的 html 输入元素将阻止用户输入非数字。如果您需要显示验证消息，我宁愿使用类似的东西

@oninput="async () => await isInputNumeric()"

在这个元素中然后创建函数

private async Task isInputNumeric() { // call javascript to check the what is inside you input element (what is the last character) and act accordingly -> show message and delete the non-numeric character OR carry on if input is numeric }

您必须使用 javascript，因为 blazor 还没有访问 html 元素的 C# 方式。

Answer 2

dinozaver 很好地回答了你的问题，但我想添加一些（我认为非常重要）建议：你没有义务使用 Blazor 的自定义控件，它主要处理验证。

如果您想要数字输入，我建议只使用一个：

<input type="number" @bind="MyImportantNumber" />

@code 
{
     int MyImportantNumber { get; set; }
}

您可以在这里获取更多信息。HTML 数字输入允许您设置最小/最大值、微调器控件的步长等。另外，在移动设备上使用 html 数字控件会弹出一个数字键盘，用户可能会觉得很方便。