2

私はウェブページを開発していますが、もっとユーザーフレンドリーなものを作りたいと思っています。機能的なGoogleMapsAPIv3とアドレス検索バーがあります。現在、ジオコーディング機能を初期化するには、マウスを使用して検索を選択する必要があります。キーボードの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>

よろしくお願いします

ここに画像の説明を入力してください

4

2 に答える 2

0

3 つの簡単な手順が必要です。

1) DOMがロードされるのを待ちます / マップを初期化します (既に実行済みです)

<body onload="initialize()">

次に、初期化関数内で:

2)アドレス フィールドにフォーカスを設定します。

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

keyup3)アドレス フィールドのイベントをリッスンし、 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 イベント属性を使用するか、JavaScript からイベント リスナーを追加しますが、両方を実行しないでください。

JSFiddle demo

于 2014-10-13T20:41:01.643 に答える
-1

私があなたなら、フォーカスを [検索] ボタンに設定します。

私の理解が正しければ、ジオコーディングを行うには、住所を入力して検索をクリックする必要があります。

したがって、可能な限りユーザーフレンドリーにするために行うことは、本文のオンロード中に、アドレステキストボックスにフォーカスを設定することです。

次に、アドレス ボックスからタブで移動したときに onleave/onblur イベントが発生した後、検索ボタンにフォーカスを設定します。次に、Enter キーを押すだけで、ジオコードが実行されます。

全体として、これら2つを追加する必要があります。:

body onload -> テキストボックスのアドレスにフォーカスを設定

アドレス テキストボックス onblur/onleave -> 検索ボタンにフォーカスを設定

3 番目の推奨事項は、検索ボタンが起動した後にアドレス テキスト ボックスにフォーカスを戻して、キーボードを離れることなくプロセスを最初からやり直すことです。

これは、負荷にフォーカスを設定するためのリンクです。オンリーブもかなり使いやすいです。

Web ページがロードされたときにフォーカスをテキストボックスに自動的に設定するにはどうすればよいですか?

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>
于 2012-06-05T22:13:21.770 に答える