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>
