In my .razor page I have an InputText, what I want is to update that number as soon as it is being typed, specifically is to put a space every 4 characters, how am I trying to do it?

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

Then,

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

I have a function where I plan to take all the value from the bind, ie: oPayments.NumberOnCard, and every 4 spaces generate a space. This does not work for me for two reasons.

1. the first number that I type is taken from the @Onkeydown event but the variable oPagos.NumeroEnTarjeta is empty.
2. I don't know how to update the value of the InputText, as I show in the following image I effectively modify the variable oPagos.NumeroEnTarjeta, but I can't get the user to see it rendered in the text box.

Should I take another way or how do I fix what I have? Thank you.

Update

I succeeded in doing something similar, but with two different events, onblur and onfocus. I use onfocus to remove the spaces and I use onblur to add my spaces, however, what I would like to do is while I'm writing

CodePudding user response：

I got some Problems with Dynamic Data using Bind-Value / Bind so i started using Blazorise and solve my problems, a possible solution is this one:

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

Then in @code

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

Also you can use the data that you want (i use string in this case) and you can add the same things than blazor (id,placeholder,etc.)

CodePudding user response：

Here's a set of code which I think does basically what you want. It was written to answer a similar question on here a few months ago! I've used dashes instead of spaces to show the space being filled. It's was coded in Net6.0 but should be Ok in Net5.0.

You will probably need to tweak it a little to fit your exact needs:

CreditCardCode.razor

@namespace StackOverflowAnswers.Components
@inherits InputBase<string>

<input @attributes="AdditionalAttributes"
       
       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;
    }
}

Test Page

@page "/"
@using StackOverflowAnswers.Components
<h3>EditForm</h3>
<div >
<EditForm EditContext=editContext>
    <div >
        <div >
            Credit Card No:
        </div>
        <div >
            <CreditCardCode  @bind-Value="this.model.CreditCardNo"/>
        </div>
        <div >
            <ValidationMessage For="() => this.model.CreditCardNo" />
        </div>
    </div>
</EditForm>
    <div >
        <div >
            Credit Card No:
        </div>
        <div >
            @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;
    }

}