Удалить замещающий текст из Карт Google Places API

Question

Я использую функцию Google Maps API Адресов автозаполнения, чтобы обеспечить расположение автозаполнения на странице, похожее на это: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

Я также использую Google Material Design Lite стилизовать свой вклад коробки. Все это прекрасно работает, кроме текста заполнителя. MDL использует label tags для предоставления текста заполнителя и подчеркивания подчеркивания, но API Google Maps Places использует placeholder attribute на входном теге, который, как представляется, отменяет текст замещающего MDL и останавливает эффект подчеркивания от работы; Кроме того, похоже, я не могу стилизовать текст заполнителя, чтобы он был другим цветом/непрозрачностью.

Я хотел бы отключить текст заполнителя API Карт Google, но даже если атрибут будет пустой строкой, это приведет к поломке метки Google MDL (текст заполнителя не отображается).

Есть ли способ, которым я могу запретить API Карт Google помещать текст заполнителя в поле ввода?

Answer 1

Вы должны просто добавить в ваш входной HTML: placeholder=""

Answer 2

Оказывается MDL имеет «имеет-заполнитель» класс CSS, который предотвращает отображение меток для ввода текстовых полей, которые имеют атрибут заполнитель.

Установка атрибута placeholder для пустых стоп-ордеров Google Maps от размещения «Введите местоположение» в текстовое поле, но этот атрибут заставляет CSS MDL скрыть метку-заполнитель.

Чтобы исправить это, я переопределил 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; 
} 

Answer 3

ответ
• Роберта Шарпа не работает для меня (без эффекта)
• MacPrawn: No placeholder в элементе ввода делает Google автоматически созданным, поэтому вы застряли с этим

Вот что я сделал:

1. Установите атрибут placeholder вашего элемента ввода в пустую строку. placeholder=""
2. Добавить прослушиватель событий на элемент mdl-componentupgraded внешнего div вашего входного элемента и удалить его класс-заполнителя.
3. Никакой специальный 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>