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>

我尝试创建一个键盘事件，并使用Enter键代码调度该事件，尽管我认为它可以工作，但被认为是“不受信任的按键”。

如何使用香草javascript将数据提交到没有表单标签，没有提交按钮，仅接受ENTER按钮作为有效提交形式的textarea？

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

谢谢。

Answer 1

您可以使用XMLHttpRequest（）：

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

function submitOnEnter(event) {
  if (event.which === 13) {
    console.log('TEST')
    var textArea = document.querySelector("textarea");
    var parameters = textArea.name + "=" + textArea.value;
    var http = new XMLHttpRequest();
    http.open("POST", "your_url_for_handling_post", true);
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-length", parameters.length);
    http.setRequestHeader("Connection", "close");
    http.onload = function() {
      //write code after receiving the content
    };
    http.send(parameters);
  }
}

document.querySelector("textarea").addEventListener("keypress", submitOnEnter);

Answer 2

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

还有另一个解决方法。如果按回车键，它将开始新的一行。这行不通。如果您仅按Enter键，它将提交消息。这样，如果按Shift + Enter，它将开始新的一行。如果您只按Enter，那么它将提交！这意味着您可以提交多行消息，并使用Enter键提交消息。

注释形式包括了代码中发生的一切的详细演练。

// 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>

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

2 个答案: