在我的 .razor 頁面中，我有一個 InputText，我想要的是在輸入后立即更新該數字，特別是每 4 個字符放置一個空格，我該怎么做？

<InputText @bind-Value="oPagos.NumeroEnTarjeta" @onkeydown="@Tecleando" type="number"
onchange="()=>NumberChanged()"  id="card-number" placeholder="1111 2222 3333 4444"  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用來添加我的空格，但是，我想做的是在我寫作的時候

uj5u.com熱心網友回復：

我在使用 Bind-Value / Bind 時遇到了一些動態資料問題，所以我開始使用 Blazorise 并解決了我的問題，一個可能的解決方案是：

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

然后在@code

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

您也可以使用所需的資料（在這種情況下我使用字串），并且您可以添加與 blazor 相同的內容（id、占位符等）

uj5u.com熱心網友回復：

這是一組代碼，我認為基本上可以滿足您的需求。幾個月前寫在這里是為了回答類似的問題！我使用破折號而不是空格來顯示被填充的空間。它是在 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;
    }

}

標籤：asp.net核心 西装外套 blazor-webassembly

上一篇：在Razor中更改日期格式

下一篇：如何在ASP.NETCoreMVC中使用資料集和模型