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

问题描述

我在 blazor 中有一个 InputText 并且我想阻止非数字字符，那么基本的 razor 和 c# 代码是什么？这是我需要它的工作方式，用户输入一个字符，它同时拒绝输入并显示一条验证消息，说明只允许输入数字。到目前为止，我已经尝试过使用正则表达式的 datanotations range 属性，但这不会拒绝非数字字符。

解决方法

它实际上是一个 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# 方式。

,

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

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

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

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

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