ICoreWebView2控件失去键盘焦点时如何取消所有选中文本？

现象说明 #

• 同一面板内放置两个ICoreWebView2控件（命名为X、Y）时，若X内存在选中的文本，用户操作将焦点切换到Y选择文本，X即使完全失去键盘焦点，之前选中的文本仍会保持选中状态。
• 该默认行为与WebKit2失焦自动取消选中文本的默认逻辑不一致，会出现多段文本同时选中的问题，干扰上层业务逻辑判断，无法满足跨平台行为一致性要求。

具体实现步骤 #

• 绑定失焦监听事件
  对每个ICoreWebView2实例，绑定对应宿主框架提供的控件级LostFocus事件（WinForms/WPF/WinUI均有对应封装事件），不要直接监听网页内部的blur事件，避免网页内部元素失焦时误触发清除逻辑。
• 注入脚本清除选区
  在失焦事件的回调中，调用WebView2的脚本执行接口，向当前实例注入JS代码清除页面所有选区，核心代码如下：

  // 清除顶层页面选区
  const selection = window.getSelection();
  if (selection) selection.removeAllRanges();
  
  // 存在同源iframe时补充遍历清除
  document.querySelectorAll('iframe').forEach(iframe => {
    try {
      const iframeSelection = iframe.contentWindow?.getSelection();
      if (iframeSelection) iframeSelection.removeAllRanges();
    } catch(e) {
      // 跨域iframe无权限访问，跳过即可
    }
  })
  

• 适配注意事项
  • 脚本执行要同步触发，不要加异步延迟，避免焦点切换过程中出现选区残留的视觉闪烁
  • 跨域iframe受同源策略限制无法访问内部选区，该场景下的选区保留属于浏览器安全限制下的预期行为，和WebKit2表现一致
  • 若需要临时禁用该逻辑（比如控件失焦是因为弹出了关联的右键菜单），可以加状态标记判断，满足条件时跳过清除逻辑

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