Google自动填充 – 请select

我已经为HTML表单的文本字段设置了Google自动填充function ,并且工作正常。

但是,当出现build议列表,并使用箭头滚动并select使用input时,它会提交表单,但仍然有一些框可以填写。如果您单击以select一个build议它工作正常,但按Enter键提交。

我怎样才能控制这个? 如何停止从提交表单中进入,而是从自动完成中selectbuild议?

谢谢! {S}

你可以使用preventDefault来停止input时被提交的表单,我用这样的东西:

  var input = document.getElementById('inputId'); google.maps.event.addDomListener(input, 'keydown', function(event) { if (event.keyCode === 13) { event.preventDefault(); } }); 

使用Google事件处理似乎是正确的解决scheme,但它不适合我。 这个jQuery解决scheme正在为我工​​作:

 $('#inputId').keydown(function (e) { if (e.which == 13 && $('.pac-container:visible').length) return false; }); 

.pac-container是保存自动完成匹配的div。 这个想法是,当比赛是可见的,回车键将只select积极的比赛。 但是,当比赛被隐藏(即一个地方被选中),它将提交表格。

我已经合并了@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(); } }); 

在页面上完美的工作。 当build议容器(.pac-container)可见时,防止提交表单。 所以现在,当用户按下回车键时,select从自动完成下拉菜单选项,他们必须再次按下提交表单。

我使用这种解决方法的主要原因是因为我发现,如果一旦select了选项,就通过回车键发送表单,那么纬度和经度值不会被传递到隐藏的表单元素中。

所有功劳归于原来的答案。

我在@ sren的回答中遇到的问题是总是阻止提交事件。 我喜欢@ mmalone的答案,但它的行为是随机的,因为有时当我点击ENTER来select位置时,处理程序在容器被隐藏后运行。 所以,这是我最终做的

 var 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> 

这个为我工作:

 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 is visible (using ES6 here for conciseness) const googleDOMNodeIsVisible = ( Array.from(googleDOMNodes).some(node => node.offsetParent !== null) ); // If it's so - 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]); } } 

我已经尝试了上面的简短答案,但是他们没有为我工作,而且我不想尝试很长的答案,所以我创build了以下代码,对我来说工作得很好。 看演示

假设这是你的forms:

 <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页面中的样子(请注意,您需要用您的google api键replaceYOUR_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>