Blazor移动端聊天应用：实现虚拟键盘持续显示

在适配移动端的Blazor聊天应用中，点击发送按钮时textarea会失焦导致虚拟键盘收起，即使调用FocusAsync()也会出现键盘短暂收起再弹出的问题。以下是从根源解决的方案：

核心思路 #

问题本质是点击按钮时会触发textarea的blur事件，导致系统自动收起键盘。我们需要阻止按钮触发默认的失焦行为，而非事后补救聚焦。

具体实现步骤 #

1. 修改按钮的触发事件 #

将按钮的@onclick替换为@onmousedown，并添加@onmousedown:preventDefault修饰符，拦截默认的失焦动作：

<div class="message-input-block">
    <textarea class="message-input" @onkeydown="HandleKeyPress" placeholder="Send a message" 
              @bind-value="messageInput" @bind-value:event="oninput" autofocus @ref="textInput" />
    <button class="send-button" @onmousedown="Send" @onmousedown:preventDefault 
            disabled="@(Chat.IsConnected == false)"></button>
</div>

2. 调整发送逻辑 #

先缓存输入内容再清空输入框，避免状态变化干扰聚焦状态，最后确保textarea保持激活：

private async Task Send()
{
    if (string.IsNullOrWhiteSpace(messageInput))
        return;

    // 缓存输入内容，避免清空后丢失
    var inputContent = messageInput;
    messageInput = string.Empty;

    // 执行消息发送逻辑
    switch (selectedChat)
    {
        case "team":
            await Chat.SendTeamMessage(inputContent);
            break;
        case "host":
            await Chat.SendHostMessage(inputContent);
            break;
        default:
            await Chat.Send(inputContent);
            break;
    }

    // 确保textarea保持聚焦
    await textInput.FocusAsync();
}

3. 移动端增强方案（可选） #

若部分浏览器仍存在稳定性问题，可配合JavaScript强化聚焦效果：
首先添加JS函数：

window.forceTextareaFocus = function(element) {
    element.focus();
    // 设置光标到输入框末尾，确保移动端键盘稳定唤起
    element.setSelectionRange(element.value.length, element.value.length);
};

然后在Blazor中注入IJSRuntime并替换原聚焦逻辑：

@inject IJSRuntime JSRuntime

// Send方法中替换聚焦代码
await JSRuntime.InvokeVoidAsync("forceTextareaFocus", textInput);

原理说明 #

使用@onmousedown并阻止默认行为，会在按钮点击的早期阶段拦截事件，避免浏览器触发textarea的失焦动作，从根源上防止键盘收起。后续的聚焦操作仅用于确保输入框处于激活状态，不会出现键盘闪跳的问题。

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