时间戳

首页 > 解决方案 > 无法在 textarea 中自动输入文本

javascript - 无法在 textarea 中自动输入文本

问题描述

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

我正在尝试编写一个机器人来接受命令来/r 1d20+2掷骰子，评估，并在网站streamyard.com上的聊天框中以Javascript发送响应（因为这就是我的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';

这会导致 textarea 显示输入的值（在本例中为“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）没有出现在 textarea 中，“发送”按钮也没有工作。

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

标签： javascripttextareabots

解决方案

虽然这并不能直接解决问题，但这是我为使其正常工作所做的。我没有使用网页上的文本区域和发送按钮，而是决定去掉中间人并查看发布帖子时发送的网络流量。然后我使用 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>"}');

推荐阅读