I have an Input-component in Blazor. I only want to input digits and optional decimals.
And I get an error: "Unhandled exception rendering component: event.preventDefault is not a function"
The component must show numbers with dots in the thousands.
And commas with decimals.
And a decimal number must be stored.
@inherits InputNumber<decimal?> @using System.Globalization @using System.Text.RegularExpressions<input @attributes="AdditionalAttributes" id="@_id" class="@CssClass" value="@_stringValue" @onkeydown="OnKeyDown" @oninput="OnInput" @onchange="OnValueChanged" /><script> window.validateInput = function (inputId, allowDecimals, event) { const key = event.key; if ( (key >= '0'&& key <= '9') || key === 'Backspace' || key === 'Tab' || key === 'Enter' || key === 'ArrowLeft' || key === 'ArrowRight' || (allowDecimals && (key === ',' || key === '.')) ) { return true; } event.preventDefault(); return false; } window.formatNumberInput = function (value, allowDecimals) { let cleanedValue = value.replace(/[^0-9.,]/g, ''); let parts = cleanedValue.split(','); let integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, "."); let formattedValue = integerPart; if (allowDecimals && parts.length > 1) { formattedValue += ','+ parts[1].substring(0, 2); } return formattedValue; }</script> @code { private string _id { get; set; } = Guid.NewGuid().ToString(); private string? _stringValue; private string? _currentValue; [Inject] IJSRuntime _jsRuntime { get; set; } [Parameter] public string FormatString { get; set; } = "#,##0.00"; [Parameter] public bool AllowDecimals { get; set; } = true; protected override void OnParametersSet() { if (Value.HasValue) { _stringValue = Value.Value.ToString(FormatString, CultureInfo.CurrentCulture); } else { _stringValue = null; } } private async Task OnKeyDown(KeyboardEventArgs e) { await _jsRuntime.InvokeVoidAsync("validateInput", _id, AllowDecimals, e); } private async Task OnInput(ChangeEventArgs e) { _currentValue = e.Value?.ToString(); var formattedValue = await _jsRuntime.InvokeAsync<string>("formatNumberInput", _currentValue, AllowDecimals); _stringValue = formattedValue; var rawValue = formattedValue.Replace(".", "").Replace(",", "."); if (decimal.TryParse(rawValue, out var result)) { Value = result; await ValueChanged.InvokeAsync(Value); } } private async Task OnValueChanged(ChangeEventArgs e) { await OnInput(e); } }