javascript - Press enter key stop page refresh - Stack Overflow

admin2025-04-18 0

I am using google API for geometric location. Currently when I type address autoplete works and mouse click the latitude and longitude append in div. My problem is if I press enter key instead of mouse click the page will refresh. Actually don;t refresh the page when select data from autoplete and enter. Please check my code below and help me to solve the problem.

<html>
    <head>
    <title>Place Autoplete With Latitude & Longitude </title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
#pac-input {
    background-color: #fff;
    padding: 0 11px 0 13px;
    width: 400px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    text-overflow: ellipsis;
}
#pac-input:focus {
    border-color: #4d90fe;
    margin-left: -1px;
    padding-left: 14px;  /* Regular padding-left + 1. */
    width: 401px;
}
}
</style>
    </head>
    <body>
        <form method="POST" action="#">
            <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
            <div id="lat"></div>
            <div id="long"></div>
            <button type="submit" class="btn btn-primary btn-lg btn-block">Erstellen</button>
        </form>

<script src=".exp&libraries=places"></script>
    <script>


  function initialize() {
        var address = (document.getElementById('pac-input'));
        var autoplete = new google.maps.places.Autoplete(address);
        autoplete.setTypes(['geocode']);
        google.maps.event.addListener(autoplete, 'place_changed', function() {
            var place = autoplete.getPlace();
            if (!place.geometry) {
                return;
            }

        var address = '';
        if (place.address_ponents) {
            address = [
                (place.address_ponents[0] && place.address_ponents[0].short_name || ''),
                (place.address_ponents[1] && place.address_ponents[1].short_name || ''),
                (place.address_ponents[2] && place.address_ponents[2].short_name || '')
                ].join(' ');
        }
        /*********************************************************************/
        /* var address contain your autoplete address *********************/
        /* place.geometry.location.lat() && place.geometry.location.lat() ****/
        /* will be used for current address latitude and longitude************/
        /*********************************************************************/
        document.getElementById('lat').innerHTML = place.geometry.location.lat();
        document.getElementById('long').innerHTML = place.geometry.location.lng();
        });
  }

   google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</body>
</html>

<html>
    <head>
    <title>Place Autoplete With Latitude & Longitude </title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
#pac-input {
    background-color: #fff;
    padding: 0 11px 0 13px;
    width: 400px;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    text-overflow: ellipsis;
}
#pac-input:focus {
    border-color: #4d90fe;
    margin-left: -1px;
    padding-left: 14px;  /* Regular padding-left + 1. */
    width: 401px;
}
}
</style>
    </head>
    <body>
        <form method="POST" action="#">
            <input id="pac-input" class="controls" type="text" placeholder="Enter a location">
            <div id="lat"></div>
            <div id="long"></div>
            <button type="submit" class="btn btn-primary btn-lg btn-block">Erstellen</button>
        </form>

<script src="https://maps.googleapis./maps/api/js?v=3.exp&libraries=places"></script>
    <script>


  function initialize() {
        var address = (document.getElementById('pac-input'));
        var autoplete = new google.maps.places.Autoplete(address);
        autoplete.setTypes(['geocode']);
        google.maps.event.addListener(autoplete, 'place_changed', function() {
            var place = autoplete.getPlace();
            if (!place.geometry) {
                return;
            }

        var address = '';
        if (place.address_ponents) {
            address = [
                (place.address_ponents[0] && place.address_ponents[0].short_name || ''),
                (place.address_ponents[1] && place.address_ponents[1].short_name || ''),
                (place.address_ponents[2] && place.address_ponents[2].short_name || '')
                ].join(' ');
        }
        /*********************************************************************/
        /* var address contain your autoplete address *********************/
        /* place.geometry.location.lat() && place.geometry.location.lat() ****/
        /* will be used for current address latitude and longitude************/
        /*********************************************************************/
        document.getElementById('lat').innerHTML = place.geometry.location.lat();
        document.getElementById('long').innerHTML = place.geometry.location.lng();
        });
  }

   google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</body>
</html>

Share asked Jan 7, 2016 at 9:37 Sarath TS 2,4626 gold badges36 silver badges79 bronze badges

possible duplicate of Stop page refreshing when 'enter' is pressed in input text element – geocodezip Commented Jan 7, 2016 at 14:31

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

Enter submits your form. You need to disable that key or the submit event (e.g. using e.preventdefault() inside an appropriate event handler (key event or submit event).

A submit event is best connected to the form element and the keyboard event the same (or on document).

e.g.

$('form').submit(function(e){
    e.preventDefault();
});

but you probably only need this one:

$('form').keypress(function(e) { 
    return e.keyCode != 13;
});

you can do this way :

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744951413a276358.html

javascriptPress enter key stop page refreshStack Overflow

最新回复(0)