我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下enter键时,我想调用JavaScript函数,但当我按下它时,表单就提交了。
当按下回车键时,如何防止表单被提交?
当前回答
在用户定义的函数中使用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 > < /形式
其他回答
react js解决方案
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
我使用了document on,它涵盖了页面加载后动态添加的html:
$(document).on('keydown', '.selector', function (event) {
if (event.which == 13 || event.keyCode == 13) {
//do your thang
}
});
增加来自@Bradley4的更新
在用户定义的函数中使用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 > < /形式
跨浏览器解决方案
一些旧的浏览器以非标准的方式实现keydown事件。
KeyBoardEvent。Key是在现代浏览器中应该实现的方式。
哪一个 和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');
}
});
HTML
<form>
<input id="myInput">
</form>
https://jsfiddle.net/tobiobeck/z13dh5r2/
有点简单
不要按“Enter”键发送表单:
<form id="form_cdb" onsubmit="return false">
按“Enter”键执行功能:
<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">