如何收听HTML页面中的按下提交按钮

问题描述：

该脚本在用户按下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>

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

答

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

答

看起来你正在使用附加组件，在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标签]（https://stackoverflow.com/tags/javascript/info）明确指出：“除非还包括另一个框架/库的标签，否则预计会有纯粹的JavaScript答案。”对于有关扩展的问题，这特别没有帮助，而且通常是不好的做法。我注意到，与许多人不同，您还提供了香草JavaScript。 – Makyen

如何收听HTML页面中的按下提交按钮

相关推荐