javascript 防止表单提交字段输入键keydown？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11898242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent form submit on field enter key keydown?
提问by lisovaccaro
I've built a listener to prevent a form from submitting on a special ocasion.
我建立了一个监听器来防止表单在特殊场合提交。
I'm using google maps autocomplete api and basically I don't want to submit the form when the users press enter and the "recommended results box" is displayed. As the users are pressing enter to choose a value from the dropdown box and not to submit the form.
我正在使用谷歌地图自动完成api，基本上我不想在用户按下回车键并显示“推荐结果框”时提交表单。当用户按 Enter 从下拉框中选择一个值而不是提交表单时。
I've built a listener that catches the event correctly but I don't know how to prevent the form from being submitted.
我已经构建了一个可以正确捕获事件的侦听器，但我不知道如何防止提交表单。
$('body').live('keydown', function(e) {
if($(".pac-container").is(":visible") && event.keyCode == 13) {
e.preventDefault(); // Prevent form submission
}
});
I tried with e.preventDefault(); but it still submits the form. The form ID is: updateAccountForm
我试过 e.preventDefault(); 但它仍然提交表单。表单 ID 为：updateAccountForm
How can I prevent it from happening?
我怎样才能防止它发生？
EDIT:
I must point out that it seems that listening for keypresses directly on the search input conflicts with Google API invalidating the autocomplete functions. So no $('input#search')keydown/keypress is possible
编辑：我必须指出，似乎直接在搜索输入上侦听按键与使自动完成功能无效的 Google API 冲突。所以没有$('input#search')按键/按键是可能的
采纳答案by Daniel Elliott
回答by lisovaccaro
The solution was actually pretty simple. All listeners seemed to fail however adding:
解决方案实际上非常简单。所有听众似乎都失败了，但补充说：
onkeydown="if($('.pac-container').is(':visible') && event.keyCode == 13) {event.preventDefault();}"
Directly to the input did the trick.
直接输入就行了。
回答by Luca Rainone
try this
试试这个
$('body').live('keydown', function(e) {
if($(".pac-container").is(":visible") && e.keyCode == 13) {
e.stopPropagation(); // Prevent form submission
}
});
please see e.keyCode instead of event.keyCode
and e.stopPropagation()instead of e.preventDefault
请参阅e.keyCode 而不是event.keyCode 而e.stopPropagation()不是e.preventDefault
回答by tyler.frankenstein
To prevent the enter key from submitting a form on a Google Places API autocomplete's text field, I needed a keydownhandler...
为了防止输入键在Google Places API 自动完成的文本字段上提交表单，我需要一个keydown处理程序...
$(document).on('keydown', '#my-autocomplete', function(e) {
if (e.which == 13) {
$('#my-autocomplete').show();
return false;
}
});
... and a place_changedlistener attached to the autocomplete after it was instantiated :
...以及在实例化后附加到自动完成的place_changed侦听器：
var my_autocomplete = new google.maps.places.Autocomplete(/*...*/);
google.maps.event.addListener(my_autocomplete, 'place_changed', function() {
var place = my_autocomplete.getPlace();
if (!place.place_id) { return; }
});
Not that it matters, but it might, this solution worked inside a jQuery Mobile web app.
并不重要，但它可能，此解决方案在 jQuery Mobile Web 应用程序中起作用。
回答by Plato
Relevant question: Google maps Places API V3 autocomplete - select first option on enter
相关问题：Google 地图 Places API V3 自动完成 - 在输入时选择第一个选项
When I used the Google Maps Autocomplete box I wanted to make 'enter' and 'tab' select the first item. I followed @amirnissim 's solution linked above, to simulate a down arrow key press if either enter/tab are pressed from the input element.
当我使用谷歌地图自动完成框时，我想让“输入”和“标签”选择第一项。我遵循上面链接的@amirnissim 的解决方案，如果从输入元素中按下输入/选项卡，则模拟向下箭头键按下。
When I coded it I didn't have those inputs as part of a form. I'm not sure how to prevent the form from sending on enter key (in fact that's how I found this question) but when I used Autocomplete my input was not part of a form.
当我编码它时，我没有将这些输入作为表单的一部分。我不确定如何防止表单发送回车键（实际上我就是这样发现这个问题的）但是当我使用自动完成时，我的输入不是表单的一部分。
回答by Sibu
preventing form submission
防止表单提交
<form method="post">
<input type="text" id="search">
</form>
????????????????????????????????????????
<script>
$('input#search').keypress(function(e) {
if (e.keyCode == '13') {
e.preventDefault();
}
});?
</script>
