如何使用JavaScript在iOS系统中停止原生语音听写功能

核心问题原因 #

iOS系统的原生听写功能会绑定当前处于激活状态的输入框上下文，直接清空输入框内容+重新聚焦的操作不会销毁之前的听写会话，导致之前的听写缓存内容后续被重新回填。

JavaScript实现方案（优先推荐） #

调整发送按钮的点击逻辑，先主动让输入框失焦终止当前输入会话（含听写进程），等待上下文释放后再清空内容、重新聚焦输入框即可。修改后的代码如下：

const input = document.getElementById('input');
const button = document.getElementById('button');
button.addEventListener('click', () => {
  // 先触发失焦，终止当前听写会话
  input.blur();
  // 主动触发输入完成事件，清理听写缓存
  input.dispatchEvent(new Event('compositionend'));
  // 清空输入框值
  input.value = '';
  // 延迟20-50ms再重新聚焦，等待系统完全释放之前的输入上下文
  setTimeout(() => {
    input.focus();
  }, 30);
})

如果以上方案还有偶现问题，可以在blur之后额外触发change和input事件，确保系统识别到输入已完成：

input.dispatchEvent(new Event('change'));
input.dispatchEvent(new Event('input'));

Swift实现方案（适用于原生封装WebView的场景） #

如果你的聊天应用是原生封装WKWebView的混合开发模式，可以通过原生侧强制终止当前第一响应者的输入会话：

1. 在JS侧点击发送按钮时，通过webkit.messageHandlers向原生侧发送终止听写的通知
2. 原生侧收到通知后执行以下代码：

// 强制当前WebView结束编辑状态，终止听写进程
webView.endEditing(true)
// 也可以让当前视图控制器的根视图结束编辑
view.endEditing(true)

执行完成后再通知JS侧执行清空输入框、重新聚焦的逻辑即可。

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