防止按 Enter 键提交表单
我有一个带有两个文本框的 form，一个 选择 下拉菜单和一个 单选按钮。当按下 enter 键时，我想调用我的 JavaScript 函数，但是当我按下它时，form 被提交。
当按下 enter 键时，如何防止提交 form？
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)" />
为了在按下回车键时从该文本框中运行一些“用户定义”脚本，而不是让它提交表单，这里有一些示例代码。请注意，此功能不会进行任何错误检查，并且很可能仅在 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 是 now deprecated。下一个最佳选择 which 是 also been deprecated。
不幸的是，现代浏览器广泛支持的受欢迎的标准 key 有一些 dodgy behavior in IE and Edge。任何早于 IE11 的东西仍然需要 polyfill。
此外，虽然已弃用的警告对于 keyCode 和 which 来说是非常不祥的，但删除这些警告将对无数旧网站造成巨大的破坏性变化。出于这个原因，他们不太可能很快就去任何地方。
同时使用 event.which 和 event.keyCode：
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
which 其他浏览器支持 keyCode。将两者都包括在内是一种很好的做法。
keydown 事件而不是 keyup 或 keypress
event.key === "输入"
更新且更简洁：使用 event.key。 没有更多的任意数字代码！
注意：旧属性（.keyCode 和 .which）已弃用。
const node = document.getElementsByClassName("mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
现代风格，带有 lambda 和解构
node.addEventListener("keydown", ({key}) => {
if (key === "Enter") // Handle press
})
keyCode 已弃用。这比代码中的魔术整数更具可读性和可维护性
key 值的人，您可以使用 keyjs.dev
Enter 更干净。没有诸如“输入”或“输入”之类的问题。如果您能记住“Enter”，那么您始终可以记住 13。它占用的空间更少。
如果您使用 jQuery：
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
检测整个文档上按下的 Enter 键：
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
http://jsfiddle.net/umerqureshi/dcjsa08n/3/
覆盖表单的 onsubmit 操作以调用您的函数并在其后添加 return false，即：
<form onsubmit="javascript:myfunc();return false;" >
return false;，然后两个动作都会被触发。
一个反应js解决方案
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
因此，覆盖尽可能多的浏览器并成为未来证明的最佳解决方案可能是
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
以下是使用 JavaScript 的方法：
//在你的 **popup.js** 文件中使用这个函数 var input = document.getElementById("textSearch"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { alert("是的，我很高兴"); } });
下面的代码将为整个页面上的 ENTER 键添加侦听器。
这在具有单个操作按钮的屏幕中非常有用，例如登录、注册、提交等。
<head>
<!--Import jQuery IMPORTANT -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Listen to Enter key event-->
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.which == 13 || event.keyCode == 13) {
alert('enter key is pressed');
}
});
</script>
</head>
在所有浏览器上测试。
一个 jQuery 解决方案。
我来这里是为了寻找一种方法来延迟表单提交，直到文本输入上的模糊事件被触发之后。
$(selector).keyup(function(e){
/*
* Delay the enter key form submit till after the hidden
* input is updated.
*/
// No need to do anything if it's not the enter key
// Also only e.which is needed as this is the jQuery event object.
if (e.which !== 13) {
return;
}
// Prevent form submit
e.preventDefault();
// Trigger the blur event.
this.blur();
// Submit the form.
$(e.target).closest('form').submit();
});
很高兴获得一个更通用的版本来触发所有延迟事件，而不仅仅是表单提交。
从我的角度来看，一个更简单有效的方法应该是：
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}
有点简单
不要在按键“Enter”上发送表单：
<form id="form_cdb" onsubmit="return false">
在按键“Enter”上执行功能：
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
使用 TypeScript，避免多次调用函数
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
<input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
</form>
</div>
<script type="text/javascript">
$("#search_value").on('keydown', function(e) {
if (e.which == 13) {
$("#search").trigger('click');
return false;
}
});
$("#search").on('click',function(){
alert('You press enter');
});
</script>
本机 js（获取 api）
document.onload = (() => { alert('ok'); let keyListener = document.querySelector('#searchUser'); // keyListener.addEventListener('keypress', (e) => { if(e. keyCode === 13){ let username = e.target.value; console.log(`username = ${username}`); fetch(`https://api.github.com/users/${username}` ,{ data: { client_id: 'xxx', client_secret: 'xxx' } }) .then((user)=>{ console.log(`user = ${user}`); }); fetch(`https: //api.github.com/users/${username}/repos`,{ data: { client_id: 'xxx', client_secret: 'xxx' } }) .then((repos)=>{ console.log(` repos = ${repos}`); for (let i = 0; i < repos.length; i++) { console.log(`repos ${i} = ${repos[i]}`); } }); }else{ console.log(`e.keyCode = ${e.keyCode}`); } }); })();
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
在您的 HTML 页面中添加此代码...它将禁用...输入按钮...
跨浏览器解决方案
一些较旧的浏览器以非标准方式实现 keydown 事件。
KeyBoardEvent.key 是它应该在现代浏览器中实现的方式。
which 和 keyCode 现在已弃用，但检查这些事件并没有什么坏处，因此代码适用于仍使用 IE 等较旧浏览器的用户。
isKeyPressed 函数检查按下的键是否已输入，event.preventDefault() 会阻止表单提交。
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}
最小的工作示例
JS
function isKeyPressed(event, expectedKey, expectedCode) {
const code = event.which || event.keyCode;
if (expectedKey === event.key || code === expectedCode) {
return true;
}
return false;
}
document.getElementById('myInput').addEventListener('keydown', function(event) {
if (isKeyPressed(event, 'Enter', 13)) {
event.preventDefault();
console.log('enter was pressed and is prevented');
}
});
HTML
<form>
<input id="myInput">
</form>
https://jsfiddle.net/tobiobeck/z13dh5r2/
在用户定义的函数中使用 event.preventDefault()
<form onsubmit="userFunction(event)"> ...
function userFunction(ev) { if(!event.target.send.checked) { console.log('form NOT submit on "Enter" key') ev.preventDefault(); } } 打开 chrome 控制台> 网络选项卡查看
我使用了文档，它涵盖了页面加载后动态添加的 html：
$(document).on('keydown', '.selector', function (event) {
if (event.which == 13 || event.keyCode == 13) {
//do your thang
}
});
添加了来自@Bradley4 的更新
keyCodeis now deprecatedkeyCode和which已弃用的说明，但我认为开发人员应该通过不支持此类旧版浏览器来帮助实现这一过渡，尤其是现在 IE 已正式死亡并且 Edge 已采用 Chromium。无论如何，检查不同标识符键的好工具是 keyjs.dev