Google स्वत: पूर्ण -

Question

का चयन करने के लिए दर्ज करें मेरे पास Google Autocomplete HTML फ़ॉर्म के टेक्स्ट फ़ील्ड के लिए सेट अप किया गया है, और यह पूरी तरह से काम कर रहा है।

हालांकि, जब सुझावों की सूची दिखाई देती है, और आप स्क्रॉल करने के लिए तीर का उपयोग करते हैं और एंटर का उपयोग करके चयन करते हैं, तो यह फ़ॉर्म सबमिट करता है, हालांकि अभी भी भरने के लिए बॉक्स हैं। यदि आप कोई सुझाव चुनने के लिए क्लिक करते हैं तो यह ठीक काम करता है, लेकिन दबाकर सबमिट करें।

मैं इसे कैसे नियंत्रित कर सकता हूं? मैं फ़ॉर्म सबमिट करने से एंटर कैसे रोक सकता हूं, और इसके बजाय स्वत: पूर्ण से एक सुझाव का चयन हो सकता हूं?

धन्यवाद! जब दर्ज मारा जाता है {S}

Answer 1

आप preventDefault उपयोग कर सकते हैं फार्म को रोकने के लिए सबमिट किया जाने वाला है, मैं कुछ इस तरह इस्तेमाल किया:

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

Answer 2

गूगल की घटनाओं से निपटने के लिए उचित समाधान की तरह लगता है का उपयोग करना है, लेकिन यह काम नहीं कर रहा मेरे लिए। यह jQuery समाधान मेरे लिए काम कर रहा है:

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

.pac-container div स्वतः पूर्ण से मेल खाता है रखती है। विचार यह है कि जब मैचों दिखाई दे रहे हैं, तो एंटर कुंजी केवल सक्रिय मिलान का चयन करेगी। लेकिन जब मैचों छुपाए जाते हैं (यानी एक जगह चुना गया है) यह फॉर्म जमा करेगा।

Answer 3

मेरे पास @ sren के उत्तर के साथ समस्या यह थी कि यह हमेशा सबमिट ईवेंट को अवरुद्ध करता है। मुझे @ mmalone का जवाब पसंद आया लेकिन यह यादृच्छिक रूप से व्यवहार करता था, क्योंकि कभी-कभी जब मैंने स्थान चुनने के लिए ENTER मारा, कंटेनर छुपाए जाने के बाद हैंडलर भाग गया। तो, यहाँ है कि मैं क्या

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>

झंडा सुनिश्चित करता है कि यदि स्थान बदला जा रहा है & उपयोगकर्ता हिट दर्ज करें, घटना अवरुद्ध है कर समाप्त हो गया है। आखिरकार ध्वज false पर Google मानचित्र के place_changed ईवेंट द्वारा सेट किया गया है, जो तब एंटर कुंजी को मारने के लिए फ़ॉर्म को सबमिट करने की अनुमति देता है। पृष्ठ पर पूरी तरह से

var input= document.getElementById('inputId'); 
google.maps.event.addDomListener(input, 'keydown', function(e) { 
    if (e.keyCode == 13 && $('.pac-container:visible').length) { 
     e.preventDefault(); 
    } 
}); 

काम करता है:

Answer 4

मैं @sren और @mmalone से पहले दो जवाब यह निर्माण करने के लिए मिला है। सुझाव कंटेनर (.pac-container) दिखाई देने पर फ़ॉर्म को सबमिट होने से रोकता है। तो अब, जब उपयोगकर्ता एंटर कुंजी दबाता है तो स्वत: पूर्ण ड्रॉपडाउन से एक विकल्प चुना जाता है, और उन्हें फ़ॉर्म सबमिट करने के लिए इसे फिर से दबा देना पड़ता है।

इस कामकाज का उपयोग करने का मेरा मुख्य कारण यह है कि मुझे पता चला है कि जैसे ही एक विकल्प के रूप में फ़ॉर्म भेजा जाता है, प्रवेश कुंजी के माध्यम से, अक्षांश और देशांतर मूल्यों को उनके छिपे हुए फॉर्म तत्वों में पर्याप्त रूप से पारित नहीं किया जा रहा था ।

मूल उत्तरों के लिए सभी क्रेडिट।

Answer 5

यह एक मेरे लिए काम किया:

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 से परिवर्तित किया जा सकता है।

Answer 6

मैंने एलेक्स के कोड को tweaked, क्योंकि यह ब्राउज़र में तोड़ दिया। यह मेरे लिए एकदम सही काम करता है:

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]); 
    } 
} 

Answer 7

मैं ऊपर कम जवाब की कोशिश की है, लेकिन वे मेरे लिए काम नहीं किया, और लंबे समय से जवाब मैं उन्हें कोशिश नहीं करना चाहता था, इसलिए मैं बना लिया है निम्नलिखित कोड जो मेरे लिए बहुत अच्छा काम करता है। See Demo

मान लीजिए यह अपने रूप है:

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

फिर जावास्क्रिप्ट कोड निम्न समस्या का समाधान होगा:

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 को अपनी Google एपीआई कुंजी के साथ प्रतिस्थापित करने की आवश्यकता है):

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