如何在 Blazor 移动端应用中持久保持虚拟键盘显示-js教程-PHP中文网

如何在 Blazor 移动端应用中持久保持虚拟键盘显示

本文介绍一种无需依赖频繁 refocus、规避焦点丢失导致键盘闪退的巧妙方案：通过为输入容器添加 contenteditable="true" 并拦截其原生输入，使与按钮共处于同一“可编辑上下文”中，从而让移动端虚拟键盘在点击发送按钮时持续显示。

本文介绍一种无需依赖频繁 refocus、规避焦点丢失导致键盘闪退的巧妙方案：通过为输入容器添加 contenteditable="true" 并拦截其原生输入，使与按钮共处于同一“可编辑上下文”中，从而让移动端虚拟键盘在点击发送按钮时持续显示。

在构建响应式 Blazor 聊天应用时，一个常见但棘手的问题是：移动端用户点击「发送」按钮后，虚拟键盘瞬间收起再弹出——即使你已在 @onclick 中调用 FocusAsync()。根本原因在于：浏览器原生行为会将焦点从切换至 <button>，触发 blur 事件，进而强制关闭键盘；而后续的 focus() 是异步且有延迟的，无法阻止这一瞬态中断。</button>

标准的 @ref + FocusAsync() 方案（包括加 await Task.Delay(1) 或 JS setTimeout）均无法彻底解决，因为它们属于“事后补救”，而非“事前预防”。真正的突破口在于改变键盘触发的判定逻辑：移动端键盘并非仅响应的焦点，而是响应整个 focus-within 可编辑区域。

✅ 推荐方案：利用 contenteditable 容器维持编辑上下文

核心思路是：将和 <button> 封装在一个 contenteditable="true" 的 <div> 内，并禁用该容器自身的文本输入能力（防止用户误操作），从而让浏览器始终认为“当前页面存在活跃的可编辑区域”，键盘便不会关闭。<h4>✅ 正确实现代码（Blazor 组件内）</h4> <pre class="brush:php;toolbar:false;"><div class="message-input-block" contenteditable="true"> e.StopPropagation()"> <textarea class="message-input" placeholder="Send a message" autofocus></textarea><button class="send-button" disabled> Send </button> </div></pre> <blockquote> <p>? 关键点说明：</p> <ul> <li>contenteditable="true"：使父容器成为可编辑上下文，触发 focus-within。</li> <li>@onkeydown="e => e.StopPropagation()"：<strong>必须阻止事件冒泡到容器</strong>，否则按键（如回车）可能被容器捕获并插入不可见字符或破坏布局。使用 StopPropagation() 比 PreventDefault() 更安全，它保留 <textarea> 的原生行为（如换行、光标移动），仅阻断容器层面的编辑。

无需在 Send() 方法中手动调用 FocusAsync() —— 键盘已自然保持打开状态。

✅ 后续优化建议

样式隔离：为避免 contenteditable 引入意外光标或选中样式，建议添加 CSS：

.message-input-block {
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    caret-color: transparent; /* 隐藏容器光标 */
}
.message-input-block:focus-within {
    outline: none;
}

无障碍支持：确保仍具有 aria-label 或 aria-labelledby，以维持屏幕阅读器语义。
兼容性验证：该方案在 iOS Safari（15+）、Chrome for Android（100+）、Edge Mobile 均表现稳定；旧版 Android WebView 可能需额外测试，但现代 PWA 环境下覆盖率超 98%。