[英]Press enter key stop page refresh
我正在使用Google API进行几何定位。 目前,当我键入地址时,自动完成功能会起作用,并单击div中的纬度和经度。 我的问题是,如果我按Enter键而不是鼠标单击,页面将刷新。 实际上,从自动完成功能中选择数据并输入后,请不要刷新页面。 请检查下面的代码,帮助我解决问题。
<html>
<head>
<title>Place Autocomplete 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.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById('pac-input'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
/*********************************************************************/
/* var address contain your autocomplete 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>
输入提交您的表格。 您需要禁用该键或e.preventdefault()
事件(例如,在适当的事件处理程序(键事件或e.preventdefault()
事件e.preventdefault()
使用e.preventdefault()
)。
最好将Submit事件连接到form元素,并将键盘事件连接到相同的(或在文档上)。
例如
$('form').submit(function(e){
e.preventDefault();
});
但您可能只需要以下一项:
$('form').keypress(function(e) {
return e.keyCode != 13;
});
你可以这样:
var input = document.getElementById('area');
google.maps.event.addDomListener(searchBox, 'keydown', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.