如何获取web.whatsapp.com中接收键盘输入的焦点元素

数据老陈

2026-8-28

web.whatsapp.com 纯键盘无障碍操作方案开发问题

已实现的基础功能

支持用户通过方向键在各个标签页间跳转
按下空格键即可实现语音消息的播放/静音切换

待解决问题

目前尚未找到打开/放大视频或图片的操作实现方式
即便后续找到打开/最大化图片的对应快捷键，要求用户按下2个不同按键的操作逻辑便捷性不足，不符合无障碍使用的简化操作要求

核心实现思路

整体方案的核心逻辑是先识别当前处于激活/选中状态的元素，再匹配对应操作，初始伪代码逻辑如下：

if (UserPressedSomeSwitchToClickTheCurrentlySelectedElement)
    if (document.activeElement.type = 'wa-audio')
        SendSpace
    else if (document.activeElement.type = 'wa-Image') then
        'todo: investigate how to click this element

调试遇到的元素定位问题

当前首先需要解决激活元素识别的问题：测试时先将焦点定位到群组搜索框，此时光标在搜索框内闪烁，按下键盘“n”键时字符会正常输入到该元素中，但使用如下JS代码尝试获取接收输入的元素时，无法返回正确结果：

var e = document.activeElement;
if (e)
{
     alert('document.activeElement: ' + e + ', name: ' + e.name);
}
else
{
     alert('document.activeElement was nothing');
     e = document.querySelector(": focus");
     if (e)
     {
         alert('querySelector : focus: ' + e);
     }
     else
     {
         alert('querySelector : focus was nothing');
     }
}

运行上述代码后弹出的提示无法定位到正确的目标元素：