Le robinet de saisie semi-automatique Google Places cesse de fonctionner sur les téléphones par Angular-Material

Il y a plusieurs messages sur SoF à propos du robinet ne fonctionne pas sur les téléphones. par exemple: Cannot select from Google places autocomplete Le robinet de saisie semi-automatique Google Places cesse de fonctionner sur les téléphones par Angular-Material

Aucune des solutions n'a fonctionné pour moi. Et je sais, c'est un matériau angulaire à blâmer. Essayez ces deux pages simples sur un téléphone:

ne fonctionne pas (essayez d'appuyer sur les suggestions): https://my-rainy-tests-42.herokuapp.com/test1.html

travail: https://my-rainy-tests-42.herokuapp.com/test2.html

La seule différence entre les deux est que dans la deuxième j'ai enlevé la dépendance sur le matériel angulaire.

code source:

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

    <meta charset="utf-8"> 

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
    <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script> 

</head> 

<body ng-app="app"> 

<div style="position: relative; height: 100%"> 

    <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
    <div id="map"></div> 
</div> 

<script type="text/javascript"> 
    angular.module('app', ['ngMaterial']); // <--- remove ngMaterial and everything is fine! 

    function initMap() { 
     var input = document.getElementById('pac-input'); 
     var searchBox = new google.maps.places.SearchBox(input); 
    } 
</script> 

<script src="//maps.googleapis.com/maps/api/js?v=3&key=AIzaSyAFCOzkHUaXjZQYmbi55ovFCGHRsh9QoS0&libraries=places&callback=initMap" async defer></script> 
</body> 

</html>

Source

2016-09-03 Kasra

ne sais pas si vous avez encore besoin, mais la solution va comme ceci:

pendant config app, désactiver le clic hijack, si matériau angulaire ne marche pas pirater vos robinets.

.config(function ($mdGestureProvider) { 
     // For mobile devices without jQuery loaded, do not 
     // intercept click events during the capture phase. 
     $mdGestureProvider.skipClickHijack(); 
    })

Source

2017-08-13 00:10:17

Le robinet de saisie semi-automatique Google Places cesse de fonctionner sur les téléphones par Angular-Material

Répondre

Questions connexes