Insert Space after 4 Chars in Blazor-CodePudding

I have a TextBox in which a variable is set. Now I want to enter a space " " after 4 characters without having to press "Enter". In JavaScript it works like this (its a example, where every 4 chars a "-" is inserted:

"https://jsfiddle.net/juspC/126/"

CodePudding user response：

This should do the trick - I used - symbol instead of space for better readability on output for this example.

<h1>Hello, world!</h1>

<p>@text</p>

<input @value="@text" @oninput="onin"/>


@code
{
    public string text;

    public void onin(ChangeEventArgs args)
    {
        var data = args.Value.ToString();

        var groups = data.Select((c, index) => new {c, index})
                .GroupBy(x => x.index/4)
                .Select(group => group.Select(elem => elem.c))
                .Select(chars => new string(chars.ToArray()));

        text = string.Join('-', groups);
    }
}

Here You have the Fiddle

CodePudding user response：

If the input string is numeric, you can use the Format property. Otherwise, you have to use either javascript, format the string in the controller, or customize the TextBox.