javascript - Blazor Capture Android 键盘 Go 键

Question

我有一个 Blazor 应用程序，其中有一个用于搜索的文本字段。 Android 用户可以使用键盘输入搜索词，但是当他单击“Go”按钮(放大镜)时，没有任何反应。在 Google 中，当用户点击“Go”时，搜索就会开始。我希望我的 Blazor 应用程序具有相同的行为。

如何拦截并处理“Go”输入？

Razor :

<div id="search-field-container">
  <label id="searchLabel" for="searchWord" hidden="hidden">SearchPhrase</label>
  <input tabindex="@TabIndex" aria-labelledby="searchLabel" @bind="@SearchPhrase" class="topbar-search-input" id="searchWord" @oninput="@((e) => { SearchPhrase = (string)e.Value!; })" @onkeydown="@Enter" type="text" disabled="@VariablesService.IsSearchProcessActive">
  <button tabindex="@TabIndex" type="button" @onclick="BtnClick" id="search-button" aria-label="Suche" disabled="@VariablesService.IsSearchProcessActive">
    <i class="ri-search-line" style=""></i>
  </button>
</div>

C#:

    public partial class SearchFieldComponent
{
    [Parameter]
    public bool IsInsideSearchPage { get; set; }

    [Parameter]
    public string SearchPhrase { get; set; } = "";

    [Parameter] 
    public int TabIndex { get; set; } = 0;
    
    [Parameter]
    public EventCallback<string> CallPageForSearchResults { get; set; }

    protected override void OnInitialized()
    {
        PassSearchPhraseToPageIfExists();
        VariablesService.OnSearchPhraseChange += VariablesService_OnSearchPhraseChange;
        VariablesService.OnIsSearchProcessActiveChange += VariablesService_OnIsSearchProcessActiveChange;
    }

    protected override void OnParametersSet()
    {
        StateHasChanged();
    }

    private void VariablesService_OnIsSearchProcessActiveChange()
    {
        StateHasChanged();
    }

    private void VariablesService_OnSearchPhraseChange()
    {
        // leert die TopBar Sucheingabe, wenn auf der Suchseite ein anderes Wort gesucht wird
        if (IsInsideSearchPage) return;
        if (SearchPhrase.Equals(VariablesService.SearchPhrase)) return;
        SearchPhrase = "";
        StateHasChanged();
    }

    private async void PassSearchPhraseToPageIfExists()
    {
        if (!string.IsNullOrEmpty(SearchPhrase))
        {
            await CallPageForSearchResults.InvokeAsync(SearchPhrase);
        }
    }

    private void BtnClick()
    {
        Check();
    }

    private void Enter(KeyboardEventArgs e)
    {
        if (e.Code is "Enter" or "NumpadEnter")
        {
            Check();
        }
    }

    private void Check()
    {
        if (IsInsideSearchPage)
        {
            // Api-Call ans Backend mit Inhalt des Suchfeldes
            PassSearchPhraseToPageIfExists();
        }
        else
        {
            //Öffnen der Suchseite und Api-Call ans Backend mit Inhalt des Suchfeldes
            NavigationManager.NavigateTo("suche/", false);
        }

        VariablesService.SetSearchPhrase(SearchPhrase);
    }

    public void Dispose()
    {
        VariablesService.OnSearchPhraseChange -= VariablesService_OnSearchPhraseChange;
        VariablesService.OnIsSearchProcessActiveChange -= VariablesService_OnIsSearchProcessActiveChange;
    }
}

Answer 1

感谢@Marvin Klein，您建议的解决方案有效。

if (e.Code == "Enter" || e.Key == "Enter")