英文:
How to force to accept only numbers html input for Maui Blazor?
问题
我想防止输入除整数以外的任何内容到 <input> 中。
我正在使用 Maui Blazor 和 MudBlazor。对于常规的 Blazor 在电脑上可以工作，但在手机上不能。
<MudNumericField
@bind-Value="value"
Label="标准"
Variant="Variant.Text"
Min="0"
Max="10"
Pattern="[0-9]" />
@code {
int value = 0;
}
英文:
I would like to prevent to type anything else only integers for <input>.
I am using Maui Blazor with MudBlazor.
For regular Blazor on computer this works, but on phone does not.
<MudNumericField
@bind-Value="value"
Label="Standard"
Variant="Variant.Text"
Min="0"
Max="10"
Pattern="[0-9]" />
@code {
int value = 0;
}
答案1
得分: 0
在普通的输入标签中，您只需这样做：
<input type="number" inputmode="numeric"/>
英文:
In the normal input tag you can just do this
<input type="number" inputmode="numeric"/>
答案2
得分: 0
在最后，我用以下方式解决了这个问题：
Razor.cs：
private int? _integerValue;
[Inject]
public IJSRuntime JSRuntime { get; set; } = default!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("mask");
}
}
CustomMasks.js：
window.mask = () => {
const integerMask = {
mask: Number,
min: 0,
};
var elements = document.querySelectorAll(".positive-integer input");
elements.forEach(element => {
IMask(element, integerMask);
});
};
Razor：
<MudNumericField @bind-Value="_integerValue" Class="positive-integer"/>
英文:
In the end i solved with these:
Razor.cs
private int? _integerValue;
[Inject]
public IJSRuntime JSRuntime { get; set; } = default!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("mask");
}
}
CustomMasks.js
window.mask = () => {
const integerMask = {
mask: Number,
min: 0,
};
var elements = document.querySelectorAll(".positive-integer input");
elements.forEach(element => {
IMask(element, integerMask);
});
};
Razor:
<MudNumericField @bind-Value="_integerValue" Class="positive-integer"/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论