如何使用 javascript 提交 <textarea> 值？

Question

我有一个供个人使用的 chrome 扩展程序来更改我访问的某些网站。一个站点有一个<textarea>，您可以输入它。没有提交按钮。您必须按 Enter 键才能提交您输入的内容。任何地方也没有表单标签。

<div id="chatRoot">
    <div data-reactroot="" class="chat-box-wrap_20_R_" style="min-width: 1180px;">
        <div class="chat-box_Wjbn9 faction_2T9gm chat-active_1Sufk">
            <div class="chat-box-input_1SBQR ">
                <div>
                    <textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W">
                    </textarea>
                </div>
            </div>
         </div>
     <!-- react-empty: 216 -->
     </div>
</div>

我尝试创建一个键盘事件并使用输入键代码进行调度，虽然我相信它有效，但它被拒绝为“不受信任的按键”。

如何使用 vanilla javascript 向没有表单标签、没有提交按钮、只接受 ENTER 按钮作为有效提交形式的textarea 提交数据？

*我不想按回车键。我希望我的 chrome 扩展程序自动将数据输入到textarea（我没有问题），然后让我的 chrome 扩展程序自动提交它输入的数据（这是我的问题所在）。

谢谢。

Answer 1

以下应该有效。您只需对当前代码进行 1 处修改：您必须在文本区域中添加一个 id。如果您复制包含的代码，则可以执行此操作。

这确实解决了另一个问题。如果按回车键，它会开始一个新行。这行不通。如果你只是按回车，它将提交消息。有了这个，如果你按 shift+enter，那么它将开始一个新行。如果你只是按回车，那么它会提交它！这意味着您可以提交多行消息并使用回车键提交消息。

代码中发生的所有事情的详细演练都包含在 cmets 的形式中。

// get the chatbox and set the default value for if the shift key and enter key was pressed
var chatbox = document.getElementById("chatbox_main"), shiftPressed = false, enterPressed = false;
// listen for the user to press a key
chatbox.addEventListener("keydown", function(e) {
  // check if the shift key was pressed and say if it was
  if (e.shiftKey) shiftPressed = true;
  // check if the enter key was pressed
  if (e.keyCode == 13) {
    // prevent the enter key from putting in a new line. If shift it pressed, it will be manually added later
    e.preventDefault();
    // say that the enter key was pressed
    enterPressed = true;
  }
});
// listen for the user to let go of a key
chatbox.addEventListener("keyup", function(e) {
  // check if the shift key or enter key was released
  if (e.shiftKey || e.keyCode == 13) {
    // check if the enter key was pressed, and if it wasn't, then reset the shift pressed value because it was only shift that was pressed
    if (!enterPressed) shiftPressed = false;
    // enter was pressed, so move on
    else {
      // make sure that shift wasn't pressed along with enter
      if (!shiftPressed) {
        // get the input from the chatbox and define if the chatbox should be cleared
        var input = chatbox.value;

        // prevent the enter key from being typed into the chatbox
        e.preventDefault();

        // run you custom code here!
        alert("You submitted this:\n" + input);

        // clear the chatbox
        chatbox.value = "";

        // reset the value
        enterPressed = false;
      // shift and enter was pressed, so move on
      } else {
        // shift + enter was pressed, so put in a new line
        chatbox.value += "\n";
        // reset the values and let the enter key get pressed
        enterPressed = false, shiftPressed = false;
      }
    }
  }
});

<textarea name="chatbox" maxlength="840" class="chat-box-textarea_2V28W" id="chatbox_main"></textarea>