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

【问题标题】：Remove placeholder text from Google Maps Places API从 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。

标签： javascript html google-maps google-maps-api-3 google-places-api

【解决方案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://stackoverflow.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;">

【讨论】：