如何在 HTML 页面中收听按下提交按钮
How to listen to press submit button in HTML page
此脚本在用户按下 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>
您似乎在使用 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');
})
要监听提交按钮中的点击,只需在脚本中向提交按钮添加一个事件监听器。但首先,将 ID 添加到 HTML:
中的提交按钮
<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);
此脚本在用户按下 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>
您似乎在使用 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');
})
要监听提交按钮中的点击,只需在脚本中向提交按钮添加一个事件监听器。但首先,将 ID 添加到 HTML:
中的提交按钮<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);