如何更新 InputText [Blazor NetCore 5.0] 上的值

Question

在我的 .razor 页面中，我有一个 InputText，我想要的是在键入后立即更新该数字，特别是每 4 个字符放置一个空格，我该怎么做？

<InputText @bind-Value="oPagos.NumeroEnTarjeta" @onkeydown="@Tecleando" type="number"
onchange="()=>NumberChanged()"  id="card-number" placeholder="1111 2222 3333 4444" class="input" maxlength="16" />

那么，

public void Tecleando(KeyboardEventArgs e)
    {
        //Console.WriteLine(e.Key);
        oPagos.NumeroEnTarjeta = generateSpaces(oPagos.NumeroEnTarjeta);
        Console.WriteLine(oPagos.NumeroEnTarjeta);
        
    }

我有一个函数，我计划从绑定中获取所有值，即：oPayments.NumberOnCard，每 4 个空格生成一个空格。 这对我不起作用有两个原因。

1. 我输入的第一个数字取自 @Onkeydown 事件，但变量 oPagos.NumeroEnTarjeta 为空。
2. 我不知道如何更新 InputText 的值，如下图所示，我有效地修改了变量 oPagos.NumeroEnTarjeta，但我无法让用户看到它在文本框中呈现。

我应该采取其他方式还是如何解决现有问题？谢谢。

更新

我成功地做了类似的事情，但有两个不同的事件，onblur 和 onfocus。 我使用onfocus 删除空格，我使用onblur 添加我的空格，但是，我想做的是在写的时候

Answer 1

我在使用 Bind-Value / Bind 时遇到了一些动态数据问题，因此我开始使用 Blazorise 并解决了我的问题，一个可能的解决方案是：

<Field>
    <TextEdit Text="@opagos.NumeroEnTarjeta" TextChanged="@MethodThatBringSpaces"></TextEdit>
<Field>

然后在@code中

Task MethodThatBringSpaces(string value){
    opagos.NumeroEnTarjeta = generateSpaces(value);
}

你也可以使用你想要的数据（在这种情况下我使用字符串），你可以添加与 blazor 相同的东西（id、占位符等）

Answer 2

这是一组我认为基本上可以满足您的需求的代码。几个月前，它是为了回答一个类似的问题而写的！我使用破折号而不是空格来显示正在填充的空间。它是在 Net6.0 中编码的，但在 Net5.0 中应该没问题。

您可能需要稍微调整一下以满足您的确切需求：

CreditCardCode.razor

@namespace StackOverflowAnswers.Components
@inherits InputBase<string>

<input @attributes="AdditionalAttributes"
       class="@CssClass"
       value="@stringValue"
       @oninput="OnInput"
       @onchange="this.OnValueChanged"
       @onfocus="OnFocus"
       @onblur="OnBlur"
       />

CreditCardCode.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.AspNetCore.Components.Web;
using System.Text.RegularExpressions;

namespace StackOverflowAnswers.Components;

public partial class CreditCardCode : InputBase<string>
{
    private string stringValue = String.Empty;
    private string _currentValue = String.Empty;

    // Sets up the initial value of the input
    protected override void OnInitialized()
    {
        _currentValue = this.Value ?? string.Empty;
        this.stringValue = this.GetCodeValue(_currentValue);
        base.OnInitialized();
    }

    private async Task OnInput(ChangeEventArgs e)
    {
        var rawValue = e.Value?.ToString();
        stringValue = "";
        await Task.Yield();
        _currentValue = this.GetCodeValue(rawValue ?? string.Empty);
        this.stringValue = this.FormatValueAsString(_currentValue);
    }

    private async Task OnFocus(FocusEventArgs e)
    {
        stringValue = "";
        await Task.Yield();
        this.stringValue = this.FormatValueAsString(_currentValue);
    }

    private async Task OnBlur(FocusEventArgs e)
    {
        stringValue = "";
        await Task.Yield();
        this.stringValue = this.GetCodeValue(_currentValue);
    }

    // We set the base CurrentValueAsString to let it handle all the EditContext changes and validation process
    private void OnValueChanged(ChangeEventArgs e)
        =>  this.CurrentValueAsString = e.Value?.ToString() ?? string.Empty;

    // Necessary override for InputBase
    protected override bool TryParseValueFromString(string? value, out string result, out string validationErrorMessage)
    {
        result = value ?? string.Empty;
        if (!string.IsNullOrEmpty(value) && value.Length == 19)
        {
            validationErrorMessage = string.Empty;
            return true;
        }
        else
        {
            validationErrorMessage = "Value must be nnnn-nnnn-nnnn-nnnn";
            return false;
        }
    }

    protected override string FormatValueAsString(string? value)
        => value ?? string.Empty;

    private string GetCodeValue(string value)
    {
        value = new string(value.Where(c => char.IsDigit(c)).ToArray());

        value = value.Length > 16
            ? value.Substring(0, 16)
            : value;

        var reg = new Regex(@"([0-9]{1,4})");
        var matches = reg.Matches(value);
        var outvalue = string.Empty;
        if (matches.Count > 0)
        {
            foreach (Match match in matches)
            {
                outvalue = $"{outvalue}-{match.Value}";
            }
            outvalue = outvalue.Trim('-');

            return outvalue;
        }
        return string.Empty;
    }
}

测试页

@page "/"
@using StackOverflowAnswers.Components
<h3>EditForm</h3>
<div class="container-fluid">
<EditForm EditContext=editContext>
    <div class="row">
        <div class="col-2">
            Credit Card No:
        </div>
        <div class="col-4">
            <CreditCardCode class="form-control" @bind-Value="this.model.CreditCardNo"/>
        </div>
        <div class="col-4">
            <ValidationMessage For="() => this.model.CreditCardNo" />
        </div>
    </div>
</EditForm>
    <div class="row">
        <div class="col-2">
            Credit Card No:
        </div>
        <div class="col-4">
            @model.CreditCardNo
        </div>
    </div>

</div>
@code {
    private EditContext? editContext;
    private ModelData model = new ModelData();

    protected override Task OnInitializedAsync()
    {
        this.editContext = new EditContext(model);
        return Task.CompletedTask;
    }

    class ModelData
    {
        public string CreditCardNo { get; set; } = string.Empty;
    }

}