【解決方法】js を使用せずに、入力コントロールを使用して blazor で小数点のない整数のみを許可するにはどうすればよいですか?

プログラミングQA

2024.02.15

フォームを動的に構築していますが、ドットを含む10進数値を入力できない整数のみを受け入れる入力コントロールが必要です。しかし、どの方法も正確な結果を提供しません。

私が試したこと：

     <input type="text" class="form-control" id="@acs.CTL_NAME" @ref="@(_inputRefs[acs.SRNO - 1])" inputmode="numeric"
            @bind="bindData[acs.SRNO-1]" tabindex="@acs.TAB_INDEX" @oninput="@((ChangeEventArgs e) => HandleNumber(e,acs.SRNO-1))">

@code{
public string[] bindData; //array is initialized with null in other method which is working fine 

private void HandleNumber(ChangeEventArgs e,int index)
{
    string inputValue = e.Value?.ToString();

    inputValue = inputValue?.Replace(".", "");

    bindData[index] = Regex.Replace(inputValue, @"[^\d]", "");
    StateHasChanged();
}
}

解決策 1

使用 type="number"、ロッカーを非表示にできます。

CSS

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* hide spinner buttons*/
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox - hide spinner buttons*/
}