如何通过按键盘上的 Enter 按钮使我的 Google Maps api v3 地址搜索栏工作？答案

【问题标题】：How can I make my Google Maps api v3 address search bar work by hitting the enter button on the keyboard?如何通过按键盘上的 Enter 按钮使我的 Google Maps api v3 地址搜索栏工作？
【发布时间】：2012-06-05 04:17:35
【问题描述】：

我正在开发一个网页，我只是想做一些对用户更友好的东西。我有一个功能强大的 Google Maps api v3 和一个地址搜索栏。目前，我必须使用鼠标选择搜索来初始化地理编码功能。如何通过按键盘上的输入按钮并单击搜索按钮使地图返回地标？我只是想让它尽可能用户友好。

这里分别是我为地址栏创建的javascript和div：

var geocoder;
    function initialize() {
    geocoder = new google.maps.Geocoder (); 
    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
                            }




           function initialize() {
        document.getElementById("address").focus(); }
    function setFocusOnSearch() {
        document.getElementById("search").focus(); }
    function codeAddress() {
        document.getElementById("address").focus(); }




    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>

提前感谢您的帮助

【问题讨论】：

您是否尝试将处理函数绑定到包裹在地址元素周围的表单的submit 事件而不是搜索按钮的click 事件？
能不能详细点，我不太明白

标签： javascript onclick onkeyup

【解决方案1】：

您需要 3 个简单的步骤：

1) 等待 DOM 加载/初始化地图（您已经这样做了）

<body onload="initialize()">

然后在初始化函数内：

2) 设置焦点到地址字段

document.getElementById('address').focus();

3) 监听地址字段的keyup事件并捕捉Enter键码/调用codeAddress函数

// Bind key-up event listener for address field
document.getElementById("address").addEventListener('keyup', function (event) {

    // Check the event key code
    if (event.keyCode == 13) {

        // Key code 13 == Enter key was pressed (and released)
        codeAddress();
    }
});

使用 onlick / onkeyup HTML event attributes 或 add the event listeners from your javascript 但不要同时使用。

JSFiddle demo

【讨论】：

【解决方案2】：

如果我是你，我会将焦点设置在“搜索”按钮上。

所以，如果我理解正确，您必须输入地址并单击搜索才能进行地理编码。

因此，为了使其尽可能用户友好，我会在加载正文期间将焦点设置为地址文本框。

然后，当您跳出地址框时，在 onleave/onblur 事件触发后，我会将焦点设置为搜索按钮。然后，您只需按 Enter 键，它就会进行地理编码。

总而言之，您需要添加这两个。：

body onload -> 设置焦点到地址文本框

地址文本框 onblur/onleave -> 设置焦点到搜索按钮

第三个建议是在搜索按钮触发后将焦点设置回地址文本框，以便在不离开键盘的情况下重新开始整个过程。

这是一个关于设置负载焦点的链接。休假也很容易使用。

How do you automatically set the focus to a textbox when a web page loads?

这是一个关于 onblur 的链接。

http://www.w3schools.com/jsref/event_onblur.asp

更新以帮助您更多。

好的，这是一个关于如何在纯 javascript 中使用 onblur 等的演示页面，通常我会使用 jquery，但我会保持简单。我尝试将其粘贴进去，但没有成功。

好的，最后一次也是最后一次尝试，您的代码应该看起来像这样，但是需要更改 javascript 标签才能正确。

    <javascript tags>
    var geocoder;

  function initialize() {
    geocoder = new google.maps.Geocoder (); 
    //Set focuse to address textbox
    document.getElementById("address").focus(); 
    }

    function codeAddress () {
        var address = document.getElementById ("address").value;
        geocoder.geocode ( { 'address': address}, function(results, status)  {
        if (status == google.maps.GeocoderStatus.OK)  {
            map.setCenter(results [0].geometry.location);
            marker.setPosition(results [0].geometry.location);
            map.setZoom(14);
            } 
        else {
            alert("Geocode was not successful for the following reason: " + status);
                }
        }); 
        //Either way set focus to address textbox
        document.getElementById("address").focus();
                            }


    function setFocusOnSearch() {
        //Set focus to search button now that you have left address textbox
        document.getElementById("search").focus(); }

    <javascript tags end>

    <body onload="initialize()">
                    <div id="geocoder">
        <input id="address" type="textbox" value="" "onblur="setFocusOnSearch()">
        <input id="search" type="button" value="Search" onclick="codeAddress()">
    </div>
                  </body>

【讨论】：

我尝试添加以下内容，但没有成功：“window.onload = function() { document.getElementById("address").focus(); };"到我的 javascript。然后在我的输入类型中添加： "onblur="address" " ?
上图向您展示了如何进行 onblur 等操作。如果您只是创建一个类似上面的页面，它会起作用，但您需要将其添加到您的页面中。
我将问题中的代码更新为我认为您的出发方式，但是当我运行代码时地图根本没有加载。 “搜索”似乎有问题。我已经添加了我看到的地理编码器 div 的屏幕截图。 "search" 和 "setFocusOnSearch()" 都是无色的
您有多个初始化函数是您的问题之一。我将发布我认为您的代码应该如何工作。
刚刚更新了我的答案，我将尽可能接近您，而无需真正创建页面并通过电子邮件将其发送给您。