自动在文本区域输入文本时遇到麻烦

Question

这是一个相当长的问题，因为我试图尽可能多地添加细节。如果您想跳到实际的问题，请参阅最后一段。

我正在尝试编写一个机器人来接受命令来掷骰子，例如/r 1d20+2，评估并在streamyard.com网站上的聊天框中发送Java响应（因为这就是我的DM用来流式传输的内容） D＆D）。

我遇到的麻烦是在textarea字段中“键入”。这是页面上聊天框的HTML：

<div class="Chat__Wrap-eYhJOs AJLtK">
  <ul class="Chat__Comments-dUewnW eqLtEG">
    <li class="Comment_Wrap-lbwIWt klCgOs">
      <div class="Comment_TextWrap-hSuVQ gHYXCH">
          <p class="Text__StyledText-guhEiE bLDoWl" color="default">test</p>
      </div>
    </li>
  </ul>
  <form class="ChatInput__Form-eqBCnG iHgCda">
    <div class="ChatInput__InputWithSmallGutter-fOaQzB dEaxxd Input__Wrap-kXBxwI iUPDqt">
      <label>
        <textarea class="sc-bdVaJa eFZRmf"></textarea>
      </label>
    </div>
    <button class="Button_Wrap-ivpgWU dSirvr ButtonBase__WrapperButton-bsASeg cylsQk" type="submit" color="primary">
      <span class="Button__InnerSpan-iZsIhM jVWFud">Send</span>
    </button>
  </form>
</div>

我可以通过以下方式获取文本区域的句柄：

var textbox = document.getElementsByClassName("sc-bdVaJa eFZRmf")[1];

而且我可以使用以下内容将文本插入其中：

textbox.value = 'test';
textbox.innerText = 'test';

这将使文本区域显示键入的值（在此情况下为“ test”）（具体是textbox.value命令执行该操作）。但是，当我使用以下命令“发送”消息时：

var button = document.getElementsByClassName("Button__Wrap-ivpgWU dSirvr ButtonBase__WrapperButton-bsASeg cylsQk");

button[1].click();

它不发送我输入的聊天消息。它根本不发送任何内容，甚至没有清除文本区域，就像单击按钮一样。此外，如果我手动单击该按钮，也会发生相同的情况。现在，如果我手动单击文本区域并在其中键入任何内容，例如在以编程方式插入的文本后添加空格，然后执行上面的代码以单击按钮，它将发送消息。

因此，这使我认为，仅通过设置textarea值，当键盘按下我没有考虑的按钮时，便会检测到某种东西。经过一番谷歌搜索后，我发现了有关触发onchange事件的信息。因此，我尝试了以下方法：

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    textbox.dispatchEvent(evt);
}
else {
    textbox.fireEvent("onchange");
}

但是，结果与之前相同。我还尝试使用以下代码在textarea中模拟按键：

textbox.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}));

但是，这似乎也不起作用，因为“发送”按钮似乎不起作用（并且textarea似乎没有使用指定的键“ a”填充）。但是再次，如果我要在框中手动键入内容，则“发送”按钮现在可以正常工作，因为它检测到正在输入内容。我还尝试过动态导入jQuery并使用jQuery模拟按键，如下所示：

var e1 = jQuery.Event("keydown");
e1.which = 97;
$('textarea.sc-bdVaJa').last().trigger(e1);
var e2 = jQuery.Event("keyup");
e2.which = 97;
$('textarea.sc-bdVaJa').last().trigger(e2);

但是结果与上面相同，'a'（十进制97）没有出现在文本区域中，“发送”按钮也没有起作用。

我认为这将是这个小项目中最简单的部分，向文本区域发送一串文本，比我想象的要困难得多。我正在寻找的是，如何才能获得一个网页来注册新文本已输入到文本区域中，以便我可以“单击”按钮并将其发送到聊天室？

Answer 1

虽然这不能直接解决问题，但这是我为使其正常工作所做的。我决定不使用网页上的textarea和“发送”按钮，而是决定切掉中间人并查看发帖时发送的网络流量。然后，我使用JavaScript将类似的请求发送到服务器，然后它成功发布了该消息。这是我的操作方式。

var xhttp = new XMLHttpRequest();
xhttp.open("POST", "/api/broadcasts/dug95avkgq/chat", true);
xhttp.setRequestHeader("content-type", "application/json");
xhttp.send('{"text":"<MESSAGE>","name":"<USERNAME>","clientId":"<ID>","color":"#22653f","csrfToken":"<TOKEN>"}');