首页 文章

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

提问于
浏览
12

我正在使用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在我的输入框中放置占位符文字?

4 回答

  • -1

    你只需要在你的输入html中添加: placeholder=""

  • 0

    事实证明,MDL有一个“has-placeholder”CSS类,它阻止为具有占位符属性的输入文本框显示标签 .

    将占位符属性设置为空会使谷歌 Map 将“输入位置”放入文本框,但该属性会导致MDL的CSS隐藏标签占位符 .

    为了解决这个问题,我覆盖了“has-placeholder”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;
    }
    
  • 0
    • Robert Sharp 's answer didn'为我工作(没效果)

    • MacPrawn:输入元素中没有占位符会让Google自动创建一个占位符,因此您会坚持使用它

    这是我做的:

    • 将input元素的占位符属性设置为空字符串 . placeholder=""

    • 在input元素的外部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>
    
  • 10

    你遇到了同样的问题 . AutoComplete方法中的第二个对象是选项,你可以简单地传递 placeholder 作为 undefined

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

相关问题