Autocomplete 谷歌自动完成-输入以选择
我已经为HTML表单的文本字段设置了Google Autocomplete，它工作得非常好 但是，当建议列表出现，并且您使用箭头滚动并使用enter选择时，它会提交表单，尽管仍有要填写的框。如果您单击以选择建议，它可以正常工作，但按enter键提交 我怎样才能控制这一切？我怎样才能阻止enter提交表单，而不是从autocomplete中选择建议 谢谢！Autocomplete 谷歌自动完成-输入以选择,autocomplete,Autocomplete,我已经为HTML表单的文本字段设置了Google Autocomplete，它工作得非常好 但是，当建议列表出现，并且您使用箭头滚动并使用enter选择时，它会提交表单，尽管仍有要填写的框。如果您单击以选择建议，它可以正常工作，但按enter键提交 我怎样才能控制这一切？我怎样才能阻止enter提交表单，而不是从autocomplete中选择建议 谢谢！ {S} 您可以使用preventDefault在按下enter键时停止提交表单，我使用了如下方法： var input=document.ge
{S} 您可以使用
preventDefaultvar input=document.getElementById（'inputId'）；
google.maps.event.addDomListener（输入，'keydown'，函数（事件）{
如果（event.keyCode==13）{
event.preventDefault（）；
}
});
$('#inputId').keydown(function (e) {
if (e.which == 13 && $('.pac-container:visible').length) return false;
});
.pac containerENTERvar位置正在更改，
input=document.getElementById（“js我的输入”），
autocomplete=new google.maps.places.autocomplete（输入），
onPlaceChange=函数（）{
正在更改的位置=错误；
};
google.maps.event.addListener（this.autocomplete，
“地点改变了”，
改变）；
google.maps.event.addDomListener（输入'keydown'，函数（e）{
如果（如keyCode===13）{
如果（位置正在更改）{
e、 预防默认值（）；
e、 停止传播（）；
}
}否则{
//表示用户可能正在键入
正在更改的位置=真；
}
});
//表单提交处理程序
$（'.js my form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
$（'.js display'）.text（“Yay表单已提交”）；
});
提交
我将@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容器）可见时提交表单。现在，当用户按下enter键时，自动完成下拉列表中的一个选项被选中，他们必须再次按下该键才能提交表单
我使用此解决方法的主要原因是，我发现如果在选择选项后立即通过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转换为任何与浏览器兼容的代码。我调整了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>
下面是HTML页面中完整代码的外观（请注意，您需要将YOUR\u API\u KEY
替换为google API KEY）：
从google places自动完成搜索框中选择位置时防止表单提交
提交
var input=document.getElementById（“google places searchbox”）；
var searchBox=newgoogle.maps.places.searchBox（输入）；
var placesSearchbox=$（“#谷歌地点搜索框”）；
打开（“聚焦模糊”，函数（）{
$（this）.closest（“form”）.toggleClass（'prevent_submit'）；
});
将搜索框放置在函数（e）的“提交”上{
if（placesSearchbox.closest（“表单”）.hasClass（“阻止提交”））{
e、 预防默认值（）；
返回false；
}
});
这里有一个简单的代码，对我来说很好（不使用jquery）
这段代码遵循上述代码，用于实现google maps autocomplete（带或不带此问题中寻求的Enter键功能）：
SelectOnNet（在上面的第一段代码中调用）定义：
此代码使google maps自动完成字段选择用户使用向下箭头键选择的项目。一旦用户按Enter键选择一个选项，就不会发生任何事情。用户必须再次按Enter键才能触发onSubmit（）或其他命令
$("#myinput").on("keydown", function(e) {
if (e.which == 13) {
if($(".pac-item").length>0)
{
$(".pac-item-selected").trigger("click");
}
}
使用$（'.pac项：first'）。触发器（'click'）如果要选择第一个结果，可以使用香草：
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();
}
})
这将始终从字段中取消提交。我只需要它来取消提交，如果用户已按下介绍选择自动完成选项。工程像宝石。用enter键从列表中点击并选择一个自动完成选项将不再提交表单。这更像是一种解构模式，而不是解决方案。与使用onClick处理程序而不是onSubmit处理程序提交表单相同。Enter应该提交表单。在过去的半个小时里，我一直在使用keyup
，试图解决我的问题，而你就是这么做的。所以，大家，不要用keyup
漂亮地捕捉表单提交，谢谢。简单有效。可能是最优雅的解决方案。非常感谢。但这不允许enter在空字段中提交表单吗？在选择地址之前？这在Chrom中不起作用
const googleAutcompleteField = this.renderer.selectRootElement(this.elem.nativeElement);
this.selectOnEnter(googleAutcompleteField);
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(inputField) {
inputField.addEventListener("keydown", (event) => {
const selectedItem = document.getElementsByClassName('pac-item-selected');
if (event.key == "Enter" && selectedItem.length != 0) {
event.preventDefault();
}
})
}
$("#myinput").on("keydown", function(e) {
if (e.which == 13) {
if($(".pac-item").length>0)
{
$(".pac-item-selected").trigger("click");
}
}
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();
}
})