正文 

当前位置： 首页 > 源码 >

从 Google Maps Places API 中删除占位符文本

     2023-02-23     212

关键词：

【中文标题】从 Google Maps Places API 中删除占位符文本【英文标题】：Remove placeholder text from Google Maps Places API 【发布时间】：2017-05-28 01:47:06 【问题描述】：

我正在使用 Google Maps Places API 自动完成功能在页面上提供位置自动完成功能，类似于：https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

我还使用Google Material Design Lite 来设置我的输入框的样式。除了占位符文本之外，这一切都很好。 MDL 使用label tags 提供占位符文本和突出显示的下划线，但Google Maps Places API 在输入标记上使用placeholder attribute，这似乎覆盖了MDL 占位符文本并阻止下划线效果起作用；此外，我似乎无法将占位符文本设置为不同的颜色/不透明度。

我希望能够关闭 Google Maps Places API 占位符文本，但即使将属性设置为空字符串也会破坏 Google MDL 标签（占位符文本不会出现）。

有什么方法可以阻止 Google Maps API 将占位符文本放入我的输入框中？

【问题讨论】：

您是否尝试过在 html 中不使用占位符属性？ <input id="autocomplete" onFocus="geolocate()" type="text"></input> 请提供Minimal, Complete and Verifiable example。 【参考方案1】：

您只需在输入 html 中添加：placeholder=""

【讨论】：

【参考方案2】：

事实证明，MDL 有一个“has-placeholder”CSS 类，可以防止显示具有占位符属性的输入文本框的标签。

将占位符属性设置为空会阻止谷歌地图将“输入位置”放入文本框中，但该属性会导致 MDL 的 CSS 隐藏标签占位符。

为了解决这个问题，我覆盖了“具有占位符”的 MDL CSS 以修复可见性。例如，这是我的 MDL 文本字段：

        <div class="mdl-textfield mdl-js-textfield" id="location-textfield">

            <!-- NOTE: this input field uses google maps autocomplete -->
            <input class="mdl-textfield__input" type="text" id="location-input" onFocus="geolocate()" placeholder="">
            <label class="mdl-textfield__label" for="location" id="location-label">Location</label>
        </div>

这是修复可见性的 CSS：

/* fix for MDL not displaying labels when input field has empty string placeholder.
    the empty string placeholder is to stop google maps API filling the placeholder */
#location-label 
    visibility: visible;


.is-dirty #location-label 
    visibility: hidden;

【讨论】：

【参考方案3】： Robert Sharp 的回答对我不起作用（无效） MacPrawn：输入元素中没有占位符让 Google 自动创建一个，所以你被困住了

这是我所做的：

    将输入元素的占位符属性设置为空字符串。 placeholder="" 在输入元素的外部 div 的 mdl-componentupgraded 元素上添加事件侦听器并删除其 has-placeholder 类。 不需要特殊的 CSS 或任何东西。

对于第 2 步，这是我的 JavaScript：

document.getElementById("address").parentNode.addEventListener("mdl-componentupgraded", function(e)  removeClass(document.getElementById("address").parentNode, "has-placeholder"); );

// removes a class "classToRemove" to an element if that class is present
function removeClass(element, classToRemove) 
  var classesString;
  classesString = element.className || "";
  if (classesString.indexOf(classToRemove) !== -1) 
    // classToRemove is present
    element.className = element.className.replace(new RegExp('(?:^|\\s)' + classToRemove + '(?:\\s|$)'), ' '); // from http://***.com/a/2155786

这是我的 HTML 代码：

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" id="address" type="text" value="" placeholder=""> <!-- NOTE: this input field uses google maps autocomplete -->
  <label class="mdl-textfield__label" for="address">This is my address label</label>
</div>

【讨论】：

【参考方案4】：

遇到了同样的问题。 AutoComplete 方法中的第二个对象是选项，您可以简单地将placeholder 传递为undefined

const myElement = document.getElementById('ELEMENT_ID');
var autocomplete = new google.maps.places.Autocomplete(myElement,  placeholder: undefined );

【讨论】：

【参考方案5】：

将占位符属性设置为“&nbsp”

<input id="autocomplete" type="text" value="" placeholder="&nbsp;">

【讨论】：

google.maps.places.Autocomplete 语言输出

】google.maps.places.Autocomplete语言输出【英文标题】：google.maps.places.Autocompletelanguageoutput【发布时间】：2015-03-2316:26:29【问题描述】：我正在使用google.maps.places.Autocomplete对象并且总是以乌克兰语获得结果。我正在加载这样的库http://... 查看详情

如何从 google.maps.places.Autocomplete 获得超过 5 个结果？

】如何从google.maps.places.Autocomplete获得超过5个结果？【英文标题】：Howtoobtainmorethan5resultsfromgoogle.maps.places.Autocomplete?【发布时间】：2015-10-2400:22:20【问题描述】：在我的应用程序中，我在web视图中显示集成在html页面中的google.maps.... 查看详情

新的 Google API 密钥“Google Maps API v3”不适用于 Google Places API？

】新的GoogleAPI密钥“GoogleMapsAPIv3”不适用于GooglePlacesAPI？【英文标题】：NewGoogleAPIKey"GoogleMapsAPIv3"doesn\'tworkforGooglePlacesAPI?【发布时间】：2012-08-3108:14:40【问题描述】：我正在使用GooglePlacesAPI(https://developers.google.com/places 查看详情

从 Google Places API 获得超过 5 条评论

】从GooglePlacesAPI获得超过5条评论【英文标题】：Togetmorethan5reviewsfromgoogleplacesAPI【发布时间】：2017-01-0612:22:55【问题描述】：我正在做一个应用程序，我使用googleplacesAPI提取google评论。当我在“https://developers.google.com/maps/documentati... 查看详情

Google Places API 中缺少 Google Maps 中的地点

】GooglePlacesAPI中缺少GoogleMaps中的地点【英文标题】：PlacefromGoogleMapsmissinginGooglePlacesAPI【发布时间】：2015-03-2110:17:52【问题描述】：我一直在尝试在GooglePlacesAPI中查找特定位置，但没有成功。当我在谷歌地图中输入“LaCucinaTrattori... 查看详情

Google Maps Places API - 如何获取地名？ [复制]

】GoogleMapsPlacesAPI-如何获取地名？[复制]【英文标题】：GoogleMapsPlacesAPI-howtogetnameofaplace?[duplicate]【发布时间】：2020-12-2814:05:45【问题描述】：当我在地图上更改指针时，我想获取一个地点的名称。我能够在地图上获得一个地方的... 查看详情

CORS 和 Google Maps Places Autocomplete API 调用 [重复]

】CORS和GoogleMapsPlacesAutocompleteAPI调用[重复]【英文标题】：CORSandGoogleMapsPlacesAutocompleteAPIcalls[duplicate]【发布时间】：2017-09-1214:52:51【问题描述】：我正在尝试让Angular与GoogleMapsPlacesAutocompleteAPI进行对话。问题是服务器不允许CORS调... 查看详情

在 Google Maps Places API 中更改默认文本“输入位置”

】在GoogleMapsPlacesAPI中更改默认文本“输入位置”【英文标题】：Changedefaulttext"EnteraLocation"InGoogleMapsPlacesAPI【发布时间】：2012-03-1120:38:07【问题描述】：我在整个互联网上寻找答案，我发现最接近答案的是另一个StackOverflow... 查看详情

Google Places API 自动填充特定城市

】GooglePlacesAPI自动填充特定城市【英文标题】：GooglePlacesAPIautocompletespecificcity【发布时间】：2013-05-0705:06:29【问题描述】：我有一些关于googleplacesapiforandroid的问题。这是正在调用的请求：https://maps.googleapis.com/maps/api/place/autocomple... 查看详情

Google Places API 将预测转化为预测

】GooglePlacesAPI将预测转化为预测【英文标题】：GoogleplacesAPIturnpredictionsintoPrediction【发布时间】：2021-10-1805:50:58【问题描述】：我有这个代码来自动完成地址：finalrequest=\'https://maps.googleapis.com/maps/api/place/autocomplete/json?input=$input&am... 查看详情

Google Places API 返回邮政编码

】GooglePlacesAPI返回邮政编码【英文标题】：GooglePlacesAPIReturnPostcode【发布时间】：2020-12-1318:05:55【问题描述】：我正在尝试获取返回的GooglePlacesAPI的邮政编码。我到处寻找，但似乎找不到人们如何做到这一点的有效示例。这是我... 查看详情

Google Places web api 不与 superagent 合作

】GooglePlaceswebapi不与superagent合作【英文标题】：GooglePlaceswebapinotcooperatingwithsuperagent【发布时间】：2018-02-1122:28:23【问题描述】：我正在尝试通过谷歌查询地点自动完成api，使用以下sn-prequest.get(`https://maps.googleapis.com/maps/api/place/a... 查看详情

Google Places API，使用邮政编码自动完成

】GooglePlacesAPI，使用邮政编码自动完成【英文标题】：GoogleplacesAPI,autocompletewithpostalcode【发布时间】：2014-09-0208:29:59【问题描述】：所以我正在尝试使用城市（在比利时）实现AutoCompleteTextView。这是我调用的网址：https://maps.google... 查看详情

google.maps.places.Autocomplete 本地化

】google.maps.places.Autocomplete本地化【英文标题】：google.maps.places.Autocompletelocalization【发布时间】：2013-08-3016:54:30【问题描述】：在我的应用程序中，我使用google.maps.places.Autocomplete.getPlace()来获取城市名称等信息，问题是检索到的... 查看详情

如何使用 CORS 实现 JavaScript Google Places API 请求

】如何使用CORS实现JavaScriptGooglePlacesAPI请求【英文标题】：HowtouseCORStoimplementJavaScriptGooglePlacesAPIrequest【发布时间】：2017-06-3001:33:47【问题描述】：我真的不明白我应该如何完成这项工作：varrequestURL=\'https://maps.googleapis.com/maps/api/p... 查看详情

Google maps Places API V3自动完成 - 在输入时选择第一个选项（并保持这种状态）[重复]

】GooglemapsPlacesAPIV3自动完成-在输入时选择第一个选项（并保持这种状态）[重复]【英文标题】：GooglemapsPlacesAPIV3autocomplete-selectfirstoptiononenter(andhaveitstaythatway)[duplicate]【发布时间】：2012-06-0202:10:46【问题描述】：这个问题与这个... 查看详情

使用 Google Places API 时的 REQUEST_DENIED

】使用GooglePlacesAPI时的REQUEST_DENIED【英文标题】：REQUEST_DENIEDwhenusingtheGooglePlacesAPI【发布时间】：2012-01-1517:05:06【问题描述】：我正在尝试使用以下网址向GooglePlacesAPI发出请求：https://maps.googleapis.com/maps/api/place/search/xml?location=37.77... 查看详情

Google Places Autocomplete - 如何获取纬度和经度？

】GooglePlacesAutocomplete-如何获取纬度和经度？【英文标题】：GooglePlacesAutocomplete-howtogetLatitudeandLongitude?【发布时间】：2015-02-2615:26:31【问题描述】：我使用网址：https://maps.googleapis.com/maps/api/place/autocomplete/json?input=bar&key=API_KE 查看详情