在Gmail上，为什么可以'；"；至；是否可以使用javascript单击字段？

我正在构建一个辅助工具，帮助那些运动控制能力有限的人写电子邮件，因此我需要编程关注“To”字段（Gmail的撰写窗口中的第一个字段）

我在ChromeDevTools面板、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>

中国商学院

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

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

let recipients=document.getElementById（':oa'）；//不确定此ID是否更改
dispatchEvent（新FocusEvent（“焦点”））；

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

---

带有焦点处理程序的节点的ID似乎确实发生了变化。我不确定如何可靠地定位它-HTML代码确实没有提供太多可靠的选择器：

接受者

您可能需要借助XPath技巧来实现以下目标：

let recipients=document.evaluate（“//div[text（）='recipients']/..”，document，null，XPathResult.FIRST\u ORDERED\u NODE\u TYPE，null）。singleNodeValue；

---

但即使这样，也只有在尚未输入收件人的情况下（如果有收件人，则“收件人”标签将替换为收件人列表），并且如果用户界面语言不是英语，该标签也可能会中断：（

它的一个父元素有

display:none

@CertainPerformance否，如果你查看devtools中的computed css字段，你可以看到它的display:block，并且它的父元素没有隐藏。非常令人印象深刻。你介意告诉我你是如何发现带有“Recipients”的元素的吗在里面是窃取和转移焦点？我最好的猜测是你在页面的正确位置看到了“收件人”，你在DOM中搜索了这些收件人，然后你使用“事件侦听器”面板查看了相关的JS？但是JS是压缩的，很难阅读。我这里遗漏了什么吗？非常感谢可以说是“学习如何钓鱼”。提前谢谢！是的。我使用右键单击上下文菜单中的Inspect项查找与“Recipients”字段相对应的DOM元素，然后在选中该元素后，使用“Event Listeners”“选项卡来查找仅应用于该特定元素的事件处理程序。我花了一分钟来查找，因为我首先查找的是click或mousedown事件处理程序，但最终我想在“focus”下查找。是的，为事件处理程序显示的代码毫无意义（

function（e）{return c.call（d.src，d.listener，e）}

），但只要看到处理程序存在，就会有足够的提示让我尝试向元素发送一个焦点事件，以查看发生了什么。