在 Blazor 中的 4 个字符后插入空格答案

【问题标题】：Insert Space after 4 Chars in Blazor在 Blazor 中的 4 个字符后插入空格
【发布时间】：2021-12-17 04:34:10
【问题描述】：

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

“https://jsfiddle.net/juspC/126/”

【问题讨论】：

【解决方案1】：

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

@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

已编辑：修复了多划线，更新了小提琴，解决方案也适用于非数字，不包括 -。

【讨论】：

认为应该是<input value="@text" @oninput="onin"/> ?
如果您从之前的值中删除 @，在这种情况下，您将得到一个带有多划线 (?) 字符串的乱码输出。
在 Blazor 中 <input> 上没有 @value 属性，因此 @value 没有意义。重复值是因为 onin 在重新格式化之前没有去除破折号。
更新小提琴：blazorfiddle.com/s/9l5zxqmz - 我添加了一个 Regex.Replace 来去除非数字，这修复了它
感谢您的帮助。但是有可能不删除非数字字符吗？删除特殊字符（！“$§&%）会很完美。我试过了，但它没有按我想要的方式工作。

【解决方案2】：

请注意您是否需要字符或只是数字 - 您的问题是字符。这是一个自定义的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 中删除任何无数字。

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

【讨论】：

【解决方案3】：

如果输入字符串是数字，您可以使用Format 属性。否则，您必须使用 javascript、在控制器中格式化字符串或 customize the TextBox。

【讨论】：