在 Blazor 中的 4 个字符后插入 Space

Question

我有一个文本框，其中设置了一个变量。现在我想在 4 个字符后输入 space " " 而不必按 "Enter"。在 JavaScript 中它是这样工作的（这是一个例子，其中每 4 个字符插入一个“-”：

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

Answer 1

如果输入字符串是数字，可以使用Format property. Otherwise, you have to use either javascript, format the string in the controller, or customize the TextBox.

Answer 2

这应该可以解决问题 - 我使用 - 符号而不是 space 来提高此示例输出的可读性。

@page "/"

<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().Replace("-", "");

        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);
    }
}

这里有 Fiddle

已编辑：修复了多重破折号，更新了 fiddle，解决方案也适用于非数字，不包括 -。

Answer 3

请注意，确定您需要字符还是仅需要数字 - 您的问题是字符。这是一个习惯 InputBase，在每 4 个字母处放置连字符：

@inherits InputBase<string?>
<input @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@stringValue"
       @oninput="OnInput"
       @onchange="this.OnValueChanged" />

@code {
    private string stringValue;
    private ValidationMessageStore _parsingValidationMessages;

    protected override bool TryParseValueFromString(string value, out string? result, out string validationErrorMessage)
    {
        result = value.Replace("-", string.Empty);
        validationErrorMessage = string.Empty;
        return true;
    }

    private void OnInput(ChangeEventArgs e)
    {
        var v = e.Value.ToString().Replace("-", string.Empty);
        var a = v.ToCharArray();
        var val = string.Empty;
        for (var x = 1; x <= a.Length; x++)
        {
            val = $"{val}{a[x - 1]}";
            if (x % 4 == 0)
                val = val + "-";
        }
        this.stringValue = val.Trim('-');
    }

    protected async Task OnValueChanged(ChangeEventArgs e)
    {
        await this.SetValue(e.Value.ToString());
    }

    private async Task SetValue(string value)
    {
        value = value.Replace("-", "");
        // Check if we have a ValidationMessageStore
        // Either get one or clear the existing one
        if (_parsingValidationMessages == null)
            _parsingValidationMessages = new ValidationMessageStore(EditContext);
        else
            _parsingValidationMessages?.Clear(FieldIdentifier);

        // Set defaults
        string? val = value;

        // check if we have a valid value
        await this.ValueChanged.InvokeAsync(val);
        this.Value = val;
        EditContext.NotifyFieldChanged(this.FieldIdentifier);
    }
}

如果您想要传递给绑定值的值中的连字符，您需要调整输出。如果您只需要数字，则需要调整 OnInput 以从 e.Value.

中删除任何 none 数字

注意：这是对类似但不同问题的代码的快速重构，因此可能需要稍微清理一下！

在 Blazor 中的 4 个字符后插入 Space

Insert Space after 4 Chars in Blazor

html

c#

textbox

blazor