我有一个带有两个文本框的表单,一个选择下拉框和一个单选按钮。当按下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文档
支持的浏览器
其他回答
react js解决方案
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
使用TypeScript,避免多次调用该函数
let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;
function SearchListEnter(event: KeyboardEvent) {
if (event.which !== 13) {
return;
}
// more stuff
}
如果你正在使用jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
在用户定义的函数中使用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 > < /形式
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();
});
最好能有一个更通用的版本,可以触发所有延迟事件,而不仅仅是表单提交。