本文介绍一种无需频繁失焦/重聚焦即可在移动端（ios/android）保持虚拟键盘持续弹出的实用方案：通过为输入容器添加 contenteditable="true" 并拦截其默认编辑行为，利用 css :focus-within 的浏览器原生机制实现键盘“永不收起”。
本文介绍一种无需频繁失焦/重聚焦即可在移动端（ios/android）保持虚拟键盘持续弹出的实用方案：通过为输入容器添加 contenteditable="true" 并拦截其默认编辑行为，利用 css :focus-within 的浏览器原生机制实现键盘“永不收起”。
在 Blazor 构建的响应式聊天应用中，一个常见且棘手的移动端体验问题是：当用户点击发送按钮（
直接操作 focus() / blur() 或 JavaScript 拦截 blur 事件（如 e.preventDefault()）在现代移动浏览器中基本无效——blur 是不可取消的 DOM 事件，且键盘策略由系统级输入法框架控制，前端无法强制“阻止收起”。
✅ 推荐解法：利用 contenteditable + :focus-within 的组合机制
核心思路是：让键盘的“可见性锚点”脱离单个 。只要该容器满足“可编辑 + 获得焦点（或其子元素获得焦点）”，键盘即保持激活。
具体实现如下：
<div class="message-input-block" contenteditable="true">
<textarea class="message-input" placeholder="Send a message" autofocus></textarea><button class="send-button" disabled>
Send
</button>
</div>
@code {
private ElementReference textInput;
private string messageInput = string.Empty;
// 关键：阻止 container 自身被编辑（仅作为键盘锚点）
private void HandleContainerKeyDown(KeyboardEventArgs e)
{
if (e.Key == "Enter" || !string.IsNullOrWhiteSpace(e.Key))
{
e.StopPropagation(); // 阻止回车换行等默认行为
}
}
private async Task Send()
{
if (string.IsNullOrWhiteSpace(messageInput)) return;
// 无需手动 FocusAsync —— 键盘已因 container:focus-within 持续显示
switch (selectedChat)
{
case "team":
await Chat.SendTeamMessage(messageInput);
break;
case "host":
await Chat.SendHostMessage(messageInput);
break;
default:
await Chat.Send(messageInput);
break;
}
messageInput = string.Empty;
// 可选：确保 textarea 仍保有逻辑焦点（提升可访问性）
await textInput.FocusAsync();
}
}
? 配套 CSS 建议（增强健壮性）：
.message-input-block {
/* 确保容器可被聚焦（尤其在 Safari 中） */
outline: none;
/* 防止意外光标样式或高亮 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.message-input-block:focus-within {
/* 可视化反馈（非必需，但利于调试） */
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
⚠️ 注意事项与最佳实践：
- 兼容性：该方案在 iOS Safari（15.4+）、Chrome for Android、Edge Mobile 上均稳定生效；旧版 iOS（≤14.5）可能存在轻微延迟，建议加 tabindex="0" 提升可聚焦性。
-
无障碍（a11y）：contenteditable="true" 会改变语义，需配合 aria-label 或 aria-hidden="true" 隐藏容器语义（因其不承载实际文本内容），例如：
<div class="message-input-block" contenteditable="true" aria-hidden="true" tabindex="0"> <li> <strong>不要移除 autofocus</strong>：首次加载仍需触发初始键盘弹出，contenteditable 容器自身不支持 autofocus，故 <textarea> 的 autofocus 仍是必要入口。</textarea> </li> <li> <strong>避免内联 JS</strong>：如原文示例中的 onkeydown="..."，应统一移入 .js 文件或 IJSRuntime 调用，便于维护与 SSR 兼容。</li> <p>? <strong>总结</strong>：与其对抗移动端键盘的聚焦生命周期，不如顺势而为——将“键盘锚点”提升至语义容器层，用 contenteditable 触发系统级编辑态，再用 @onkeydown 和 CSS 精准约束交互边界。该方案零延迟、无闪烁、低侵入，是 Blazor 移动端表单体验优化的工业级实践。</p> </div>
