Blazor应用中如何拦截并处理Android键盘的Go按键事件

问题分析 #

Android键盘上的“Go/放大镜”按钮本质是触发Enter键事件，但你的搜索输入框当前使用type="text"，浏览器无法识别这是搜索场景，导致按钮点击后没有触发预期的搜索逻辑；同时现有代码仅通过@onkeydown监听Enter键，需要配合输入框类型调整才能正确捕获移动端键盘的触发事件。

解决方案1：修改输入框类型（最简方案） #

直接将输入框的type从text改为search，这会让移动端浏览器识别为搜索场景，自动显示搜索按钮，且点击按钮时会触发Enter键事件，而你的现有Enter方法已经处理了Enter键逻辑，无需额外修改C#代码。

修改Razor代码中的input标签：

<input tabindex="@TabIndex" 
       aria-labelledby="searchLabel" 
       @bind="@SearchPhrase" 
       class="topbar-search-input" 
       id="searchWord" 
       @oninput="@((e) => { SearchPhrase = (string)e.Value!; })" 
       @onkeydown="@Enter" 
       type="search"  <!-- 这里改成search -->
       disabled="@VariablesService.IsSearchProcessActive">

解决方案2：使用表单包裹（更符合HTML语义） #

用<form>标签包裹搜索框和按钮，监听表单的onsubmit事件，统一处理“点击搜索按钮”和“键盘Go/Enter提交”两种场景，避免单独处理键盘事件。

修改Razor代码

<form @onsubmit="HandleSubmit">
  <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!; })" 
           type="search" 
           disabled="@VariablesService.IsSearchProcessActive">
    <button tabindex="@TabIndex" 
            type="submit"  <!-- 按钮type改为submit -->
            id="search-button" 
            aria-label="Suche" 
            disabled="@VariablesService.IsSearchProcessActive">
      <i class="ri-search-line" style=""></i>
    </button>
  </div>
</form>

添加C#处理方法

在SearchFieldComponent类中添加表单提交处理方法：

private void HandleSubmit(EventArgs e)
{
    e.PreventDefault(); // 阻止默认表单提交行为，避免页面刷新
    Check(); // 复用现有搜索逻辑
}

效果验证 #

修改后，Android用户点击键盘上的“Go/放大镜”按钮时，会触发你已实现的Check()方法，执行和点击搜索按钮一致的搜索逻辑，和谷歌搜索的行为一致。

内容的提问来源于stack exchange，提问作者Frank Mehlhop