如何通過按鍵盤上的 Enter 按鈕使我的 Google Maps api v3 地址搜索欄工作？

Question

我正在開發一個網頁，我只想做一些更用戶友好的東西。 我有一個功能強大的 Google Maps api v3 和一個地址搜索欄。 目前，我必須使用鼠標選擇搜索來初始化地理編碼功能。 如何通過按鍵盤上的 Enter 按鈕並單擊搜索按鈕使地圖返回地標？ 我只是想讓它盡可能地用戶友好。

這是我為地址欄分別創建的 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>

預先感謝您的幫助

在此處輸入圖片說明

Answer 1

您需要 3 個簡單的步驟：

1) 等待 DOM加載/初始化地圖（你已經這樣做了）

<body onload="initialize()">

然后在初始化函數中：

2）將焦點設置到地址字段

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

3）監聽地址字段的keyup事件，捕捉回車鍵碼/調用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 事件屬性，要么從您的 javascript 添加事件偵聽器，但不要同時進行。

JSFiddle 演示

Answer 2

如果我是你，我會將焦點設置在“搜索”按鈕上。

因此，如果我理解正確，您必須輸入地址並單擊搜索才能進行地理編碼。

所以，我會做的讓它盡可能用戶友好的是在加載正文期間我將焦點設置到地址文本框。

然后，當您退出地址框時，在 onleave/onblur 事件觸發后，我會將焦點設置為搜索按鈕。 然后你只需按回車鍵，它就會進行地理編碼。

總而言之，您需要添加這兩個。 ：

body onload -> setfocus 到地址文本框

地址文本框 onblur/onleave -> setfocus to search button

第三個建議是在搜索按鈕觸發后將焦點設置回地址文本框，以在不離開鍵盤的情況下重新開始整個過程。

這是一個關於設置關注負載的鏈接。 休假也很容易使用。

加載網頁時如何自動將焦點設置到文本框？

這是一個關於 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>

如何通過按鍵盤上的 Enter 按鈕使我的 Google Maps api v3 地址搜索欄工作？

問題描述

2 個解決方案

解決方案1
0 2014-10-13 20:41:01

解決方案2
-1 2012-06-05 22:13:21

如何通過按鍵盤上的 Enter 按鈕使我的 Google Maps api v3 地址搜索欄工作？

問題描述

2 個解決方案

解決方案1 0 2014-10-13 20:41:01

解決方案2 -1 2012-06-05 22:13:21

解決方案1
0 2014-10-13 20:41:01

解決方案2
-1 2012-06-05 22:13:21