使用 Ctrl +V 组合键时，是否有方法更新附加到 Blazor 中的输入文本项的绑定变量？

Question

我有这个输入来捕获电话号码。当用户输入数字并按“Enter”键时，会触发“KeyWasPressed”方法并进行一些验证。这按预期工作，但是......

例如，当用户从 Excel 复制并粘贴数字时，变量@Phone不会更新其值，因此当用户按“Enter”键时，验证会发送空值。

@Phone当某些文本粘贴到输入控件时，有没有办法刷新/更新变量？

这是我的代码片段：

<input type="number" class="form-control" @bind="@Phone" @onkeypress="@(async e => await KeyWasPressed(e))" placeholder="Client Phone Number" />

@code {

    string Phone { get; set; }

    private async Task GetClientInfo()
    {
        if(String.IsNullOrWhiteSpace(Phone))
        {
            notificationMessages = $"Add a phone number";
        }
        else
        {
            showSpinner = true;

            clientInfo = await ApiHelper.GetClientInfoByPhone(Phone);           

            if(clientInfo != null)
            {
                var singleViewId = clientInfo?.SingleViewId;
                var customerNumber = clientInfo?.Accounts?.FirstOrDefault().CustomerNumber;
                var status = clientInfo?.Accounts?.FirstOrDefault().Status;
                showClientInformation = true;

                var CrossSell = clientInfo?.Accounts[0]?.CrossSell;


            }
            else
            {
                showClientInformation = false;
                notificationMessages = $"No client data for this phone ({Phone})";
            }

            showSpinner = false;
        }
    }

    private async Task KeyWasPressed(KeyboardEventArgs args)
    {
        if(args.Key == "Enter")
        {
            //await GetClientInfo();
        }
    }
}

Answer 1

直接解决方案：

只需使用@bind-value="@Phone" @bind-value:event="oninput"：

<input type="number" @bind-value="@Phone" @bind-value:event="oninput" 
       @onkeyup="@OnUserFinish"/>
<p>@clientInfo</p>

@code {
    protected string Phone { get; set; } 
    protected string clientInfo {get; set;}

    private async Task OnUserFinish(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
          clientInfo = await Fake_ApiHelper_GetClientInfoByPhone(Phone);      
    }

    private async Task<string> Fake_ApiHelper_GetClientInfoByPhone(string phone)
    {
        await Task.CompletedTask;
        return $"Client phone: {phone}";
    }
}

奖励曲目：

转向用户友好的去抖版本：

@using System.Timers;

<input type="number" @bind-value="@Phone" @bind-value:event="oninput" 
       @onkeyup="@HandleKeyUp"/>
<p>@clientInfo</p>

@code {
    protected string Phone { get; set; } 
    protected string clientInfo {get; set;}
    private System.Timers.Timer aTimer;

    protected override void OnInitialized()
    {
        aTimer = new System.Timers.Timer(250);
        aTimer.Elapsed += OnUserFinish;
        aTimer.AutoReset = false;
    }

    void HandleKeyUp(KeyboardEventArgs e)
    {
        // remove previous one
        aTimer.Stop();

        // new timer
        aTimer.Start();        
    }    

    private void OnUserFinish(Object source, ElapsedEventArgs e)
    {
        InvokeAsync( async () =>
          {
            clientInfo = await Fake_ApiHelper_GetClientInfoByPhone(Phone);      
            StateHasChanged();
          });
    }

    private async Task<string> Fake_ApiHelper_GetClientInfoByPhone(string phone)
    {
        await Task.CompletedTask;
        return $"Client phone: {phone}";
    }
}