Google 在输入中放置影响按键行为的自动完成

Question

在此 Plunker 中有一个带有 Google Place Autocomplete 附加的输入。

当它获得焦点并使用 Tab 键时，将调用 $scope.data.keyDown 函数，但不会更新输入的文本。如果没有附件，输入文本将更改为 "hello"。您可以通过简单地注释掉附件行来看到这一点

  // var autoComplete = new google.maps.places.Autocomplete(placeAutoCompleteInput, {types: ['(cities)']});

为什么 Autocomplete 有这种效果，有什么办法解决吗？

JS

angular.module('app', []);

angular.module('app').controller('ctrl', function ($scope, $element) {
  $scope.data = {};

  var placeAutoCompleteInput = $element[0].querySelector('#place');
  var autoComplete = new google.maps.places.Autocomplete(placeAutoCompleteInput, {types: ['(cities)']});

  $scope.data.keyDown = function($event) {
    if ($event.keyCode == 9) { // Tab key
        $scope.data.text = "hello";
    }
  }
});

标记

<!doctype html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.js"></script>
    <script src="example.js"></script>
  </head>

<body ng-app="app" ng-controller="ctrl">
  <input id="place" ng-model="data.text" ng-keydown="data.keyDown($event)">
</body>
</html>

Answer 1

这是为您准备的 plnkr solution

$scope.data.keyDown = function($event) {
    console.log("keyDown", $event);
    if ($event.keyCode == 9) { // Tab key

        $scope.data.text = "hello";

        //fix
        placeAutoCompleteInput.addEventListener('blur', function() {
          placeAutoCompleteInput.value = $scope.data.text;
        });

    }
  };

关注此 link to Whosebug question 并阅读 Nicholas Ryan Bowers 的回答以获得更多见解。

Google 在输入中放置影响按键行为的自动完成

Google Place Autocomplete affecting key down behaviour in input

google-maps-api-3

angularjs