Answers:
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
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;
}
}
返回该函数的值将警告事件处理程序不要再使事件冒泡,并且将防止进一步处理keypress事件。
它已经指出,keyCode
在现在已经过时。下一个最好的替代which
已经也被弃用。
不幸的key
是,受现代浏览器广泛支持的受人喜爱的标准在IE和Edge中具有某些躲避行为。任何比IE11都旧的版本仍需要使用polyfill。
此外,尽管已过时的警告对于keyCode
和都是不祥的警告which
,但删除这些警告将意味着对无数旧网站的巨大突破。因此,他们不太可能很快就去任何地方。
eval
内容,然后按一下按钮的内容与打开开发人员工具并执行该操作一样。如果这是要保存到数据库中并可以由ANOTHER用户打开的东西,那将是一件大事,但这是一个完全独立于此小片段的问题。
同时使用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
orkeypress
如果您使用的是jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
preventDefault
至少会在Chrome中触发,但似乎并未停止提交表单。
$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
'keydown'
是正确的,正如其他评论者所说的那样。由于尚未更改,因此我将更新答案。我使用了这个答案,并停留了一段时间,直到我回来查看评论。
最近更新,更清洁:使用event.key
。没有更多的任意数字代码!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
keyCode
不推荐使用。这是不是在你的代码中的魔法整数可读性和可维护性
在整个文档上按检测回车键:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
onsubmit
将表单的操作覆盖为对函数的调用,并在其后添加return false,即:
<form onsubmit="javascript:myfunc();return false;" >
因此,也许最好的解决方案是覆盖尽可能多的浏览器并成为未来的证明。
if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
如果您想使用纯Java脚本来执行此操作,那么这是一个完美运行的示例
假设这是您的html文件
<!DOCTYPE html>
<html>
<body style="width: 500px">
<input type="text" id="textSearch"/>
<script type="text/javascript" src="public/js/popup.js"></script>
</body>
</html>
在您的popup.js文件中,只需使用此功能
var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
alert("yes it works,I'm happy ");
}
});
下面的代码将为添加监听器 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();
});
得到一个能触发所有延迟事件而不只是表单提交的更通用的版本将是很好的。
使用TypeScript,并避免对该函数进行多次调用
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
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">
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
在您的HTML页面中添加此代码...将禁用...输入按钮。
<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>
一些较旧的浏览器以非标准方式实现按键事件。
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>