Question

在此Plunker中，附加了Google地方自动填充功能。

当它具有焦点并且使用tab键时，将调用$ scope.data.keyDown函数，但不更新输入的文本。没有附件，输入文本将更改为＆＃34; hello＆＃34;。您只需注释掉附件行

就可以看到这一点

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

为什么自动完成功能会产生这种影响并且有一种解决方法吗？

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 stackoverflow question并阅读Nicholas Ryan Bowers的回答以获得更多见解。

Google Place Autocomplete会影响输入中的关键行为

1 个答案: