我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
当前回答
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
在HTML页面中添加此代码…它会使……输入按钮. .
其他回答
重写表单的onsubmit动作,调用你的函数,并在后面添加return false,即:
<form onsubmit="javascript:myfunc();return false;" >
因此,覆盖尽可能多的浏览器的最佳解决方案可能是
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
下面是如何使用JavaScript来完成它:
//in your **popup.js** file just use this function var input = document.getElementById("textSearch"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { alert("yes it works,I'm happy "); } }); <!--Let's say this is your html file--> <!DOCTYPE html> <html> <body style="width: 500px"> <input placeholder="Enter the text and press enter" type="text" id="textSearch"/> <script type="text/javascript" src="public/js/popup.js"></script> </body> </html>
我使用了document on,它涵盖了页面加载后动态添加的html:
$(document).on('keydown', '.selector', function (event) {
if (event.which == 13 || event.keyCode == 13) {
//do your thang
}
});
增加来自@Bradley4的更新
if(characterCode == 13) {
// returning false will prevent the event from bubbling up.
return false;
} else{
return true;
}
好的,想象一下你在表单中有以下文本框:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
为了在按enter键时从这个文本框运行一些“用户定义的”脚本,而不是让它提交表单,下面是一些示例代码。请注意,这个函数不做任何错误检查,很可能只在IE中工作。要做到这一点,您需要一个更健壮的解决方案,但您将得到大致的想法。
function runScript(e) {
//See notes about 'which' and 'key'
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
返回函数的值将提醒事件处理程序不要进一步冒泡事件,并将防止进一步处理按键事件。
注意:
已经指出keyCode现在已弃用。退而求其次的选择也被弃用了。
不幸的是,被现代浏览器广泛支持的标准键在IE和Edge中存在一些不可靠的行为。任何比IE11更老的东西仍然需要填充。
此外,虽然弃用的警告是相当不祥的keyCode和,删除这些将代表一个巨大的突破性的变化,无数的遗留网站。出于这个原因,他们不太可能很快离开任何地方。