小开

最佳答案

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是现在弃用。下一个最佳替代which有也被弃用。

不幸的是，被现代浏览器广泛支持的标准key有一些IE和Edge的不良行为。任何比IE11更老的东西仍然需要polyfill。

此外，虽然已弃用的警告是关于keyCode和which的不祥之兆，但删除它们将代表着对无数遗留网站的巨大突破性变化。因此，他们不太可能很快离开任何地方。

小开

重写表单的onsubmit动作，使其成为对函数的调用，并在其后添加return false，即:

<form onsubmit="javascript:myfunc();return false;" >

小开

同时使用event.which和event.keyCode:

function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};

小开

如果你正在使用jQuery:

$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});

小开

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;
}
}

小开

整个文档按下回车键:

$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});

http://jsfiddle.net/umerqureshi/dcjsa08n/3/ < a href = " http://jsfiddle.net/umerqureshi/dcjsa08n/3/ " > < / >

小开

react js解决方案

 handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}




<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>

小开

下面的代码将在整个页面上为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>

已在所有浏览器上测试。

小开

原生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}`);
}
});
})();

<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">

小开

<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>

小开

事件。键=== "回车;

最近更干净的方法:使用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
})

Mozilla Docs

支持的浏览器

小开

使用TypeScript，避免多次调用该函数

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;


function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}

小开

下面是如何使用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>

小开

因此，覆盖尽可能多的浏览器的最佳解决方案可能是

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")

小开

有点简单

不要按回车键发送表格:

<form id="form_cdb" onsubmit="return false">

按回车键执行功能:

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">

小开

跨浏览器解决方案

一些旧的浏览器以非标准的方式实现keydown事件。

KeyBoardEvent.key是它应该在现代浏览器中实现的方式。

which 和keyCode现在已经弃用了，但检查这些事件并没有什么害处，这样代码就可以为仍然使用IE等旧浏览器的用户工作

isKeyPressed函数检查按下的键是否为enter， 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');
}
});

超文本标记语言

<form>
<input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

小开

<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

在HTML页面中添加此代码…它会使……输入按钮. .

小开

在用户定义的函数中使用event.preventDefault()

<form onsubmit="userFunction(event)"> ...

function userFunction(ev)
{
if(!event.target.send.checked)
{
console.log('form NOT submit on "Enter" key')


ev.preventDefault();
}
}

Open chrome console> network tab to see
<form onsubmit="userFunction(event)" action="/test.txt">
<input placeholder="type and press Enter" /><br>
<input type="checkbox" name="send" /> submit on enter
</form>

小开

我使用了document on，它涵盖了页面加载后动态添加的html:

  $(document).on('keydown', '.selector', function (event) {
if (event.which == 13 || event.keyCode == 13) {
//do your thang
}
});

增加来自@Bradley4的更新

防止在输入键时提交表单