如何聆聽HTML頁面中的提交按鈕

Question

用戶按下enter鍵后，此腳本將發出text-entered的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>

Answer 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');
})

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

如何聆聽HTML頁面中的提交按鈕

問題描述

2 個解決方案

解決方案1
1 2017-05-07 19:56:44

解決方案2
0 已采納 2017-06-10 10:25:39

如何聆聽HTML頁面中的提交按鈕

問題描述

2 個解決方案

解決方案1 1 2017-05-07 19:56:44

解決方案2 0 已采納 2017-06-10 10:25:39

解決方案1
1 2017-05-07 19:56:44

解決方案2
0 已采納 2017-06-10 10:25:39