Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

MudBlazor: How to enable real-time thousands separators in a custom decimal input component?

$
0
0

I'm building a Blazor component that uses a MudTextField to accept decimal numbers and display them with real-time thousands separators. I want the formatting to kick in as soon as the user types (e.g., typing 123456.78 should become 123,456.78). I also need the field to auto-select all text on focus.

Here's my current code. It only displays the text with commas formatting after focus is lost rather than on each keystroke:

@using System.Globalization<MudTextField T="string"              @ref="_input"              Text="@_displayValue"              TextChanged="@OnTextChanged"              Immediate="true"              Placeholder="@Placeholder"              Margin="Margin.Dense"              Variant="@Variant"              Class="@($"small-input {Class}")"              Pattern="^[0-9]*\\.?[0-9]+$"              @onfocus="OnInputFocus"/>@code{    [Parameter] public decimal? Value { get; set; }    [Parameter] public EventCallback<decimal> ValueChanged { get; set; }    [Parameter] public string? Placeholder { get; set; }    [Parameter] public Variant Variant { get; set; } = Variant.Outlined;    [Parameter] public string Class { get; set; } = string.Empty;    private MudTextField<string> _input = default!;    private string _displayValue = string.Empty;    protected override void OnInitialized()    {        if (Value.HasValue)        {            _displayValue = FormatNumber(Value.Value);        }    }    private void OnTextChanged(string newValue)    {        var raw = newValue.Replace(",", "");        if (decimal.TryParse(raw, out var parsed))        {            Value = parsed;            ValueChanged.InvokeAsync(parsed);            _displayValue = FormatNumber(parsed);        }        else        {            _displayValue = newValue;        }    }    private async Task OnInputFocus(FocusEventArgs args)    {        await _input.SelectAsync();    }    private string FormatNumber(decimal number) => number.ToString("###,##0.##", CultureInfo.InvariantCulture);}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>