我为 HTML 表单的文本字段设置了 Google 自动完成，并且它运行良好。
但是，当出现建议列表，并且您使用箭头滚动并使用 Enter 键进行选择时，它会提交表单，尽管仍然有需要填写的框。如果您单击以选择建议，它可以正常工作，但按 输入 提交。
我该如何控制这个？如何停止输入提交表单，而是从自动完成中选择建议？
谢谢！ {S}
您可以使用
preventDefault var input = document.getElementById('inputId');
google.maps.event.addDomListener(input, 'keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
}
});
使用 Google 事件处理似乎是正确的解决方案，但它对我不起作用。这个 jQuery 解决方案对我有用：
$('#inputId').keydown(function (e) {
if (e.which == 13 && $('.pac-container:visible').length) return false;
});
.pac-container我合并了 @sren 和 @mmalone 的前两个答案来产生这个：
var input= document.getElementById('inputId');
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13 && $('.pac-container:visible').length) {
e.preventDefault();
}
});
在页面上完美运行。当建议容器 (.pac-container) 可见时，阻止提交表单。因此，现在，当用户按下 Enter 键时，会从自动完成下拉列表中选择一个选项，并且他们必须再次按下该键才能提交表单。
我使用此解决方法的主要原因是因为我发现，如果通过回车键选择选项后立即发送表单，则纬度和经度值不会足够快地传递到其隐藏的表单元素中。
所有功劳归于原始答案。
这个对我有用：
google.maps.event.addDomListener(input, 'keydown', e => {
// If it's Enter
if (e.keyCode === 13) {
// Select all Google's dropdown DOM nodes (can be multiple)
const googleDOMNodes = document.getElementsByClassName('pac-container');
// Check if any of them are visible (using ES6 here for conciseness)
const googleDOMNodeIsVisible = (
Array.from(googleDOMNodes).some(node => node.offsetParent !== null)
);
// If one is visible - preventDefault
if (googleDOMNodeIsVisible) e.preventDefault();
}
});
可以轻松地从 ES6 转换为任何浏览器兼容的代码。
我对 @sren 的回答遇到的问题是它总是阻止提交事件。我喜欢 @mmalone 的答案，但它的行为是随机的，因为有时当我点击
ENTERvar location_being_changed,
input = document.getElementById("js-my-input"),
autocomplete = new google.maps.places.Autocomplete(input),
onPlaceChange = function () {
location_being_changed = false;
};
google.maps.event.addListener( this.autocomplete,
'place_changed',
onPlaceChange );
google.maps.event.addDomListener(input, 'keydown', function (e) {
if (e.keyCode === 13) {
if (location_being_changed) {
e.preventDefault();
e.stopPropagation();
}
} else {
// means the user is probably typing
location_being_changed = true;
}
});
// Form Submit Handler
$('.js-my-form').on('submit', function (e) {
e.preventDefault();
$('.js-display').text("Yay form got submitted");
});<p class="js-display"></p>
<form class="js-my-form">
<input type="text" id="js-my-input" />
<button type="submit">Submit</button>
</form>
<!-- External Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>该标志确保如果位置发生更改且用户按 Enter 键，则事件将被阻止。最终，该标志通过谷歌地图的
falseplace_changed你可以用香草来做：
element.addEventListener('keydown', function(e) {
const gPlaceChoices = document.querySelector('.pac-container')
// No choices element ?
if (null === gPlaceChoices) {
return
}
// Get choices visivility
let visibility = window.getComputedStyle(gPlaceChoices).display
// In this case, enter key will do nothing
if ('none' !== visibility && e.keyCode === 13) {
e.preventDefault();
}
})
这是一个对我来说效果很好的简单代码（不使用 jquery）。
const googleAutcompleteField = this.renderer.selectRootElement(this.elem.nativeElement);
this.selectOnEnter(googleAutcompleteField);
这段代码遵循上面的代码，用于实现谷歌地图自动完成（有或没有本问题中寻求的 Enter 键功能）：
this.autocomplete = new google.maps.places.Autocomplete(googleAutcompleteField, this.googleMapsOptions);
this.autocomplete.setFields(['address_component', 'formatted_address', 'geometry']);
this.autocomplete.addListener('place_changed', () => {
this.zone.run(() => {
this.googleMapsData.emit([this.autocomplete.getPlace()]);
})
})
selectOnEnter（上面第一段代码中调用）定义：
selectOnEnter(inputField) {
inputField.addEventListener("keydown", (event) => {
const selectedItem = document.getElementsByClassName('pac-item-selected');
if (event.key == "Enter" && selectedItem.length != 0) {
event.preventDefault();
}
})
}
此代码使谷歌地图自动完成字段选择用户通过向下箭头按键选择的项目。 一旦用户按下 Enter 键选择了一个选项，就不会发生任何事情。 用户必须再次按 Enter 才能触发 onSubmit() 或其他命令
我调整了 Alex 的代码，因为它在浏览器中崩溃了。 这对我来说非常适合：
google.maps.event.addDomListener(
document.getElementById('YOUR_ELEMENT_ID'),
'keydown',
function(e) {
// If it's Enter
if (e.keyCode === 13) {
// Select all Google's dropdown DOM nodes (can be multiple)
const googleDOMNodes = document.getElementsByClassName('pac-container');
//If multiple nodes, prevent form submit.
if (googleDOMNodes.length > 0){
e.preventDefault();
}
//Remove Google's drop down elements, so that future form submit requests work.
removeElementsByClass('pac-container');
}
}
);
function removeElementsByClass(className){
var elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
我已经尝试过上面的简短答案，但它们对我不起作用，而长答案我不想尝试它们，所以我创建了以下对我来说效果很好的代码。 查看演示
假设这是您的表格：
<form action="" method="">
<input type="text" name="place" id="google-places-searchbox" placeholder="Enter place name"><br><br>
<input type="text" name="field-1" placeholder="Field 1"><br><br>
<input type="text" name="field-2" placeholder="Field 2"><br><br>
<button type="submit">Submit</button>
</form>
那么下面的javascript代码就可以解决这个问题：
var placesSearchbox = $("#google-places-searchbox");
placesSearchbox.on("focus blur", function() {
$(this).closest("form").toggleClass('prevent_submit');
});
placesSearchbox.closest("form").on("submit", function(e) {
if (placesSearchbox.closest("form").hasClass('prevent_submit')) {
e.preventDefault();
return false;
}
});
这是完整代码在 HTML 页面中的样子（请注意，您需要将
YOUR_API_KEY<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Prevent form submission when choosing a place from google places autocomplete searchbox</title>
</head>
<body>
<form action="" method="">
<input type="text" name="place" id="google-places-searchbox" placeholder="Enter place name"><br><br>
<input type="text" name="field-1" placeholder="Field 1"><br><br>
<input type="text" name="field-2" placeholder="Field 2"><br><br>
<button type="submit">Submit</button>
</form>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Google Maps -->
<!-- Note that you need to replace the next YOUR_API_KEY with your api key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"
async defer></script>
<script>
var input = document.getElementById("google-places-searchbox");
var searchBox = new google.maps.places.SearchBox(input);
var placesSearchbox = $("#google-places-searchbox");
placesSearchbox.on("focus blur", function() {
$(this).closest("form").toggleClass('prevent_submit');
});
placesSearchbox.closest("form").on("submit", function(e) {
if (placesSearchbox.closest("form").hasClass('prevent_submit')) {
e.preventDefault();
return false;
}
});
</script>
</body>
</html>
$("#myinput").on("keydown", function(e) {
if (e.which == 13) {
if($(".pac-item").length>0)
{
$(".pac-item-selected").trigger("click");
}
}
如果您想选择第一个结果，请使用
$('.pac-item:first').trigger('click');简单的 JavaScript 答案。 仅当选项列表打开时才抑制输入键按下。 在 Chrome、Edge 和 Safari 上进行了测试。
function enterKeyPressPatch(inputField) {
inputField.addEventListener("keydown", (event) => {
if (event.code === "Enter") {
let choicesVisible = false;
document.querySelectorAll(".pac-container").forEach((element) => {
if (element.checkVisibility()) {
choicesVisible = true;
}
});
if (choicesVisible) {
event.preventDefault();
}
}
});
}