Blazor文本字段输入用户键入延迟 [英] Blazor Textfield Oninput User Typing Delay

问题描述

如何在Blazor中为事件(OnInput)添加延迟?例如，如果用户在文本字段中键入，而您想等到用户完成键入.

> Blazor.Templates :: 3.0.0-preview8.19405.7

How can I add a delay to an event (OnInput) in Blazor ?
For example, if a user is typing in the text field and you want to wait until the user has finished typing.

Blazor.Templates::3.0.0-preview8.19405.7

代码:

@page "/"
<input type="text" @bind="Data" @oninput="OnInputHandler"/>
<p>@Data</p>

@code {    
    public string Data { get; set; }   

    public void OnInputHandler(UIChangeEventArgs e)
    {
        Data = e.Value.ToString();
    }    
}

推荐答案

解决方案:

您的问题没有单一的解决方案.以下代码只是一种方法.看一看，使其适应您的要求.该代码在每个keyup上重置一个计时器，只有最后一个计时器引发OnUserFinish事件.

Solution:

There is no single solution to your question. The following code is just one approach. Take a look and adapt it to your requirements. The code resets a timer on each keyup, only last timer raises the OnUserFinish event.

@using System.Timers;
...
<input type="text" @bind-value="Data" @bind-value:event="oninput" 
       @onkeyup="@HandleKeyUp"/>
<p>@Data2</p>

@code {
    public string Data { get; set; }   
    public string Data2 { get; set; }  
    private System.Timers.Timer aTimer;

    protected override void OnInitialized()
    {
        aTimer = new System.Timers.Timer(1000);
        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( () =>
          {
            Data2 = $"User has finished: {Data}";
            StateHasChanged();
          });
    }
}

用例:

此代码用例的一个示例是避免后端请求，因为该请求直到用户停止键入才发送.

Use case:

One example of use case of this code is avoiding backend requests, because the request is not sent until user stops typing.

这篇关于Blazor文本字段输入用户键入延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！