按回车键停止页面刷新

Posted

技术标签:

【中文标题】按回车键停止页面刷新【英文标题】:Press enter key stop page refresh 【发布时间】:2016-04-11 15:23:56 【问题描述】:

我正在使用谷歌 API 来获取几何位置。目前,当我键入地址自动完成工作并鼠标单击 div 中的纬度和经度追加时。我的问题是如果我按回车键而不是鼠标单击页面将刷新。实际上,当从自动完成中选择数据并输入时,不要刷新页面。请检查我下面的代码并帮助我解决问题。

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

【问题讨论】:

Stop page refreshing when 'enter' is pressed in input text element的可能重复 【参考方案1】:

Enter 提交您的表单。您需要禁用该键或提交事件(例如,在适当的事件处理程序(键事件或提交事件)中使用 e.preventdefault()

提交事件最好连接到表单元素和键盘事件相同(或在文档上)。

例如

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

但你可能只需要这个:

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

【讨论】:

google.maps.event.addListener(autocomplete, 'place_changed', function(e) e.preventdefault() ..... 但它不起作用 @samsam:该事件与表单提交(并停止它)有什么关系?这只是停止 place_changed 事件的默认设置。您需要为submit 事件或按键事件添加处理程序(并完全停止Enter @samsam:你试过什么什么不工作? :) 您可以想象“它不起作用”之类的陈述实际上并没有帮助 :) 用您尝试的任何内容更新您的问题,以便可以识别其他问题 google.maps.event.addListener(autocomplete, 'submit', function(e) e.preventdefault() 我会更新答案。您还需要将事件处理程序添加到适当的元素:)【参考方案2】:

你可以这样做:

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

【讨论】:

以上是关于按回车键停止页面刷新的主要内容,如果未能解决你的问题,请参考以下文章

解决input输入框按下回车键刷新页面

bootstrap表单按回车会自动刷新页面的问题

键盘输入时,如何在Ajax调用URL更改后停止MVC页面刷新

js如何触发页面按回车的事件

记录解决前端form表单回车禁止刷新页面

Element UI 中el-input 框回车触发页面刷新问题及解决方案