我在blazor中有一个InputText，我想防止非数字字符，基本的razor和c#代码是什么?这里是我需要它的工作方式，用户输入一个字符，它拒绝所有的输入在一起，并显示一个验证消息，说只有数字是允许的。到目前为止，我已经尝试使用regex标记范围属性，但它不拒绝非数字字符。
这实际上是一个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还没有c#的方式来访问html元素。
dinozaver很好地回答了你的问题，但我想补充一些(我认为非常重要的)建议:您没有义务使用Blazor的自定义控件，这些控件主要处理验证。
如果你想要一个数字输入，我建议只使用一个:
<input type="number" @bind="MyImportantNumber" />
@code
{
int MyImportantNumber { get; set; }
}
你可以在这里获得更多信息。HTML数字输入允许您设置最小/最大值，微调控件的步长等。此外，在移动设备上使用html数字控件将弹出一个数字键盘，用户可能会觉得方便。
如果你是在EditForm上下文中，你可以使用blazor组件InputNumber来编辑Int32, Int64, Int16，单，双，十进制。根据Blazor文档，它的渲染如下:
<input type="number"/>
使用示例:
<EditForm Model="myObject">
<InputNumber @bind-Value="myObject.mydouble" />
<ValidationMessage For="()=> myObject.mydouble"/>
</EditForm>
@code {
private MyObject myObject = new MyObject();
class MyObject {
public double mydouble { get; set; }
}
}
多亏了ValidationMessage组件，如果用户尝试输入非数字字符，就会显示一条消息。绑定变量的类型可以由编译器推断出来，或者您可以显式地指出:
<InputNumber TValue="double" @bind-Value="myObject.mydouble" />
我认为你可以用Html标签解决它，只需使用:您可以在这里查看文档。https://developer.mozilla.org/es/docs/Web/HTML/Element/input/number
不能评论别人的答案，但它工作完美!
添加到Host.cshtml中的Script部分:
$(document).on("keypress",".numbers", function (e) {
return (e.charCode != 8 && e.charCode == 0 || (e.charCode >= 48 && e.charCode <= 57));
});
$(document).on("paste", ".numbers", function (e) {
e.preventDefault();
let paste = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
this.value = paste.replace(/D/g, '');
this.dispatchEvent(new Event('change'));
});
输入必须包含class="number ":
<input type="text" class="numbers" @bind-value="@anyValue"/>
可以添加jquery作为辅助工具。
<input type="text" @bind="Model" class="NumberOnly" />
并将此代码放在MainLayout.razor
<script>
$(document).on("keypress", ".NumberOnly", function(e){
return (e.charCode !=8 && e.charCode ==0 || (e.charCode >= 48 && e.charCode <= 57));
});
</script>