91

HTML フォームのテキスト フィールドにGoogle オートコンプリートを設定しましたが、完全に機能しています。

ただし、提案のリストが表示され、矢印を使用してスクロールし、Enter キーを使用して選択すると、入力するボックスがまだありますが、フォームが送信されます。クリックして提案を選択すると、正常に動作しますが、Enterキーを押して送信します.

どうすればこれを制御できますか? 入力がフォームの送信を停止し、代わりにオートコンプリートからの提案を選択するにはどうすればよいですか?

ありがとう！{S}

4

10 に答える 10

117

preventDefaultEnter が押されたときにフォームの送信を停止するために使用できます。私は次のようなものを使用しました。

  var input = document.getElementById('inputId');
  google.maps.event.addDomListener(input, 'keydown', function(event) { 
    if (event.keyCode === 13) { 
        event.preventDefault(); 
    }
  });
于 2012-08-03T12:09:42.260 に答える
55

Google イベント処理を使用することは適切な解決策のように思えますが、私にとってはうまくいきません。このjQueryソリューションは私のために働いています:

$('#inputId').keydown(function (e) {
  if (e.which == 13 && $('.pac-container:visible').length) return false;
});

.pac-containerオートコンプリートの一致を保持する div です。アイデアは、一致が表示されている場合、Enter キーはアクティブな一致のみを選択するというものです。ただし、一致が非表示の場合 (つまり、場所が選択されている場合)、フォームが送信されます。

于 2012-09-05T06:24:47.353 に答える
22

@sren と @mmalone からの最初の 2 つの回答を組み合わせて、これを作成しました。

var input= document.getElementById('inputId');
google.maps.event.addDomListener(input, 'keydown', function(e) { 
    if (e.keyCode == 13 && $('.pac-container:visible').length) { 
        e.preventDefault(); 
    }
});

ページ上で完全に機能します。提案コンテナー (.pac-container) が表示されているときにフォームが送信されないようにします。これで、ユーザーが Enter キーを押したときにオートコンプリート ドロップダウンのオプションが選択され、フォームを送信するにはもう一度キーを押す必要があります。

この回避策を使用する主な理由は、Enter キーを使用してオプションが選択されるとすぐにフォームが送信されると、緯度と経度の値が非表示のフォーム要素に十分に速く渡されないことがわかったためです。

元の回答に対するすべての功績。

于 2015-02-06T19:31:47.927 に答える
9

これは私のために働いた：

google.maps.event.addDomListener(input, 'keydown', e => {

  // If it's Enter
  if (e.keyCode === 13) {

    // Select all Google's dropdown DOM nodes (can be multiple)
    const googleDOMNodes = document.getElementsByClassName('pac-container');

    // Check if any of them are visible (using ES6 here for conciseness)
    const googleDOMNodeIsVisible = (
      Array.from(googleDOMNodes).some(node => node.offsetParent !== null)
    );

    // If one is visible - preventDefault
    if (googleDOMNodeIsVisible) e.preventDefault();

  }

});

ES6 から任意のブラウザー互換コードに簡単に変換できます。

于 2015-10-26T23:09:07.420 に答える
4

@srenの回答で私が抱えていた問題は、送信イベントが常にブロックされることでした。私は@mmaloneの答えが好きでしたがENTER、場所を選択するためにヒットしたときに、コンテナーが非表示になった後にハンドラーが実行されることがあるように、ランダムに動作しました。だから、これが私がやったことです

var location_being_changed,
    input = document.getElementById("js-my-input"),
    autocomplete = new google.maps.places.Autocomplete(input),
    onPlaceChange = function () {
        location_being_changed = false;
    };

google.maps.event.addListener( this.autocomplete,
                               'place_changed',
                               onPlaceChange );

google.maps.event.addDomListener(input, 'keydown', function (e) {
    if (e.keyCode === 13) {
        if (location_being_changed) {
            e.preventDefault();
            e.stopPropagation();
        }
    } else {
        // means the user is probably typing
        location_being_changed = true;
    }
});

// Form Submit Handler
$('.js-my-form').on('submit', function (e) {
    e.preventDefault();
    $('.js-display').text("Yay form got submitted");
});
<p class="js-display"></p>
<form class="js-my-form">
    <input type="text" id="js-my-input" />
    <button type="submit">Submit</button>
</form>

<!-- External Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

フラグは、場所が変更されている場合にユーザーが入力すると、イベントがブロックされることを保証します。最終的に、falseGoogle マップのplace_changedイベントによってフラグが設定され、Enter キーを押したときにフォームを送信できるようになります。

于 2014-10-30T09:40:51.577 に答える
1

これは私にとってうまくいった簡単なコードです（jqueryを使用していません）。

const googleAutcompleteField = this.renderer.selectRootElement(this.elem.nativeElement);
this.selectOnEnter(googleAutcompleteField);

上記のコードに従うこのコードは、Googleマップのオートコンプリートを実装するために使用されます（この質問で求められているEnterキー機能の有無にかかわらず）：

this.autocomplete = new google.maps.places.Autocomplete(googleAutcompleteField, this.googleMapsOptions);
this.autocomplete.setFields(['address_component', 'formatted_address', 'geometry']);
this.autocomplete.addListener('place_changed', () => {
  this.zone.run(() => {
    this.googleMapsData.emit([this.autocomplete.getPlace()]);
  })
})

selectOnEnter (上記のコードの最初の部分で呼び出されます) の定義:

selectOnEnter(inputField) {
  inputField.addEventListener("keydown", (event) => {
    const selectedItem = document.getElementsByClassName('pac-item-selected');
    if (event.key == "Enter" && selectedItem.length != 0) {
      event.preventDefault();
    }
  })
}

このコードにより、Google マップのオートコンプリート フィールドで、ユーザーが下矢印キーを押して選択した項目が選択されます。ユーザーが Enter キーを押してオプションを選択すると、何も起こりません。ユーザーはもう一度 Enter キーを押して、onSubmit() またはその他のコマンドをトリガーする必要があります

于 2020-06-17T20:57:15.263 に答える