在 Gmail 上，为什么不能使用 javascript 单击“收件人”字段？

Question

我正在构建一个辅助功能工具，可以帮助运动控制受限的人编写电子邮件，因此我需要“收件人”字段（Gmail 撰写窗口中的第一个字段）的编程焦点。

我在 Chrome devtools 面板中的 textarea 元素上尝试了以下各种组合，它是父元素。 似乎没有什么能让它集中注意力。

setTimeout(() => {
    let el = document.querySelector('*[name="to"]');
    el.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
    el.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
    el.focus();
    el.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
    el.click();
    console.log('done')
}, 5000)

以下是相关标记的示例：

<div class="wO nr l1" style="">
    <input class="wA" tabindex="-1" aria-hidden="true">
    <textarea rows="1" id=":bw" class="vO" name="to" spellcheck="false" autocomplete="false" autocapitalize="off" autocorrect="off" tabindex="1" dir="ltr" aria-label="To" role="combobox" aria-autocomplete="list" style="width: 380px;"></textarea>
    <div class="aA6">
        <span>
            <div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;"></div>
            <div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;"></div>
            <span><span id=":8p" class="aB gQ pE" role="link" tabindex="1" data-tooltip="Add Cc recipients ‪(Ctrl-Shift-C)‬" aria-label="Add Cc recipients ‪(Ctrl-Shift-C)‬" style="user-select: none;">Cc</span><span id=":8o" class="aB  gQ pB" role="link" tabindex="1" data-tooltip="Add Bcc recipients ‪(Ctrl-Shift-B)‬" aria-label="Add Bcc recipients ‪(Ctrl-Shift-B)‬" style="user-select: none;">Bcc</span><span id=":aw" role="button" tabindex="1" aria-hidden="false" class="bcV Sz" style="display:none" data-tooltip="Some recipients use services that don't support encryption (click for details)" aria-label="Some recipients use services that don't support encryption (click for details)"></span></span><div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;">
            </div>
        </span>
    </div>
</div>

Answer 1

当未聚焦时，Gmail 撰写窗口中的“收件人”、“抄送”和“密件抄送”字段被另一个标记为“收件人”的字段覆盖：

这个“收件人”字段有一个焦点事件处理程序，可以自动隐藏它，显示“收件人”、“抄送”和“密件抄送”字段并将焦点转移到其中之一。 要以编程方式激活处理程序，您首先需要找到“收件人”字段并将焦点事件分派给它。 以下代码在 Chrome 控制台上为我提供了技巧，尽管我怀疑我使用的 ID 可能不稳定：

let recipients = document.getElementById(':oa');  // not sure if this ID changes
recipients.dispatchEvent(new FocusEvent('focus'));

（一旦在“收件人”/“抄送”/“密件抄送”字段中输入了至少一个电子邮件地址，“收件人”字段的外观就会发生变化，隐藏标签并显示收件人地址。但是，相同的代码似乎仍然可以激活焦点事件处理程序。）

---

附言。 具有焦点处理程序的节点的 ID 似乎确实发生了变化。 我不确定如何可靠地定位它——HTML 代码确实没有提供太多将可靠的选择器挂在上面的功能：

<div id=":oa" class="aoD hl" tabindex="1" style="background-color: transparent;">
  <div id=":pm" class="oL aDm" style="">Recipients</div>
  <div id=":o7" class="bgW">
    <span id=":p0" role="button" tabindex="-1" aria-hidden="true" class="bcV Sz" style="display:none" data-tooltip="Some recipients use services that don't support encryption (click for details)" aria-label="Some recipients use services that don't support encryption (click for details)"></span>
  </div>
</div>

您可能需要借助XPath 技巧来使用标签 text来定位它，如下所示：

let recipients = document.evaluate("//div[text()='Recipients']/..", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

但即使这样也只有在尚未输入收件人时才有效（如果有收件人，“收件人”标签将替换为收件人列表），并且如果用户的界面语言不是英语，它也可能会中断。 :(