0

该脚本在用户按下enter键后发出text-entered。我需要的是听我点击我的HTML页面上的submit按钮。这是脚本:如何收听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); 

的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> 
+0

连接监听器提交按钮不textearea!目前还不清楚你的意思发送这个“当用户点击返回时,发送”文本输入“ //消息到main.js” – Gacci

回答

0

要收听点击在提交按钮,简单地说,在脚本中,向提交按钮添加一个事件监听器。但首先,在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); 
0

看起来你正在使用附加组件,在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'); 
}) 
+0

提供一个jQuery解决方案,以不标记jQuery的问题往往没有帮助。如果OP想要一个基于jQuery的解决方案,他们可以/应该用jQuery标记问题,或者在问题中提到它。实际上,[javascript标签](https://stackoverflow.com/tags/javascript/info)明确指出:“除非还包括另一个框架/库的标签,否则预计会有纯粹的JavaScript答案。”对于有关扩展的问题,这特别没有帮助,而且通常是不好的做法。我注意到,与许多人不同,您还提供了香草JavaScript。 – Makyen