Javascript 如何在HTML页面中收听按提交按钮_Javascript_Firefox Addon_Firefox Addon Sdk_Dom Events

Javascript 如何在HTML页面中收听按提交按钮

javascript firefox-addon

Javascript 如何在HTML页面中收听按提交按钮,javascript,firefox-addon,firefox-addon-sdk,dom-events,Javascript,Firefox Addon,Firefox Addon Sdk,Dom Events,此脚本发出用户按enter键后输入的文本。我需要听的是在我的HTML页面中点击提交按钮。以下是脚本： // 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.addE

此脚本发出用户按enter键后输入的文本。我需要听的是在我的HTML页面中点击提交按钮。以下是脚本：

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

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);

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>

看起来您正在使用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');
})

要侦听submit按钮中的单击，只需在脚本中向submit按钮添加一个事件侦听器。但首先，在HTML中的submit按钮中添加和id：

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

将侦听器附加到提交按钮而不是文本earea！现在还不清楚，当用户点击return时，将输入的文本//消息发送到main.js是什么意思。对于没有使用jQuery标记的问题，提供jQuery解决方案通常是没有帮助的。如果OP想要基于jQuery的解决方案，他们可以/应该用jQuery标记问题，或者在问题中提到它。事实上，声明明确指出：除非还包括框架/库的另一个标记，否则应该是纯JavaScript的答案。对于有关扩展的问题，这尤其没有帮助，而且通常是糟糕的做法。我注意到，与许多人不同，您还提供了香草JavaScript。