如何在 HTML 页面中收听按下提交按钮答案

【问题标题】：How to listen to press submit button in HTML page如何在 HTML 页面中收听按下提交按钮
【发布时间】：2017-05-07 19:37:06
【问题描述】：

此脚本在用户按下enter 键后发出text-entered。我需要听点击我的 HTML 页面中的submit 按钮。这是脚本：

// When the user hits return, send the "text-entered"
// message to main.js.
// The message payload is the contents of the edit box.
var textArea = document.getElementById("txt-field");
textArea.addEventListener('keyup', function onkeyup(event) {
  if (event.keyCode == 13) {
    // Remove the newline.
    text = textArea.value.replace(/(\r\n|\n|\r)/gm,"");
    addon.port.emit("text-entered", text);
    textArea.value = '';
  }
}, false);

HTML 是：

<html>
<head>
    <style type="text/css" media="all">
      textarea {
        margin: 10px;
      }
      body {

        background-color:#b3dbfa;
      }
    </style>
  </head>

  <body>

  <form> 
      Enter URL: <br>
      <input type="text" id="txt-field">
      <input type="submit" value="Add">
  </form>
  <script src="get-text.js"></script>
  </body>
</html>

【问题讨论】：

附加监听器以提交按钮而不是文本区域！并且不清楚发送此“当用户点击返回时，将“文本输入” // 消息发送到 main.js 是什么意思

标签： javascript firefox-addon firefox-addon-sdk dom-events

【解决方案1】：

您似乎正在使用 Addon-On SDK，这是一项传统技术。 Mozilla 建议迁移到 WebExtensions。

但是回答你的问题：使用 jquery 你可以做类似的事情

$('#myform').submit(function(e) {
    e.preventDefault(); // don't submit
    console.log('do something');
});

使用纯 javascript 你可以做类似的事情

var form = document.getElementById('myform');
form.addEventListener('submit', function(e) {
    e.preventDefault(); // don't submit
    console.log('do something');
})

【讨论】：

为未使用 jQuery 标记的问题提供 jQuery 解决方案通常没有帮助。如果 OP 想要一个基于 jQuery 的解决方案，他们可以/应该用 jQuery 标记问题，或者在问题中提到它。事实上，javascript tag 明确指出：“除非还包含框架/库的另一个标签，否则需要纯 JavaScript 答案。”对于有关扩展的问题，这特别无用，而且通常是不好的做法。我确实注意到，与许多人不同，您还提供了 vanilla JavaScript。

【解决方案2】：

要监听提交按钮中的点击，只需在脚本中添加一个事件监听器到提交按钮。但首先，在 HTML 中的提交按钮中添加和 id：

<input type="submit" value="Add" id="submit-btn">

在脚本中：

addbtn=document.getElementById("submit-btn");
addbtn.addEventListener('click', function (event) {
event.preventDefault();
// Get the text and remove the newline.
var text = formTextArea.value.replace(/\s/,"");    //remove space characters
var level = document.getElementById("levels-list").value;
//send the entered data to the addon to store them
self.port.emit("text-entered", text);
                                                        self.port.emit("selected-level", level);
formTextArea.value = ''; //intialise the text area to empty after adding the item.
}
,false);

【讨论】：