我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
当前回答
事件。键=== "Enter"
使用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文档
支持的浏览器
其他回答
使用两个事件。which和event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
有点简单
不要按“Enter”键发送表单:
<form id="form_cdb" onsubmit="return false">
按“Enter”键执行功能:
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
原生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">
在用户定义的函数中使用event.preventDefault()
<form onsubmit="userFunction(event)"> ...
函数userFunction (ev) { 如果(! event.target.send.checked) { console.log('form NOT submit on "Enter" key') ev.preventDefault (); } } 打开chrome控制台>网络选项卡查看 <form onsubmit="userFunction(event)" action="/test.txt"> . <input placeholder="type and press Enter" /><br> . <input type="checkbox" name="send" /> submit on enter > < /形式
事件。键=== "Enter"
使用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文档
支持的浏览器