我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
当前回答
原生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">
其他回答
下面的代码将在整个页面上添加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();
});
最好能有一个更通用的版本,可以触发所有延迟事件,而不仅仅是表单提交。
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和,删除这些将代表一个巨大的突破性的变化,无数的遗留网站。出于这个原因,他们不太可能很快离开任何地方。
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">
在HTML页面中添加此代码…它会使……输入按钮. .
在我看来,一个更简单有效的方法应该是:
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}