Remove placeholder text from the Google Maps Places APIs

Question

I use the Google Maps API autocomplete function to provide autocomplete location on a page similar to this: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

I also use Google Material Design Lite to create input fields. All this works great except for placeholder text. MDL uses tag labels to provide placeholder text and underline, but the Google Maps Places API uses the placeholder attribute in the input tag, which appears to override the replacement MDL text and stop the underline effect from working; Also, it looks like I cannot stylize the placeholder text so that it is different in color / opacity.

I would like to disable the Google Maps API placeholder text, but even if the attribute is an empty string, this will break the Google MDL label (the placeholder text does not appear).

Is there a way that the Google APIs Google can put placeholder text in an input field?

Answer 1

You only need to add your input html: placeholder=""

Answer 2

It turns out that MDL has a CSS class with "placement" that prohibits the display of labels for entering text fields with the placeholder attribute.

Setting the placeholder attribute for empty Google Maps stoplists from placing "Enter Location" in the text box, but the attribute causes MDL CSS to hide the label.

To fix this, I overridden the MDL CSS with a placeholder to capture visibility. For example, here is my MDL text box:

  <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> 

And here is the CSS to capture the visibility:

 /* 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

• Robert Sharp's answer didn't work for me (no effect)
• MacPrawn: No placeholder in the input element will force Google to automatically create it, so you're stuck with this

Here is what I did:

• Set the placeholder attribute of your input element to an empty string. placeholder=""
• Add an event listener to the mdl-componentupgraded element of your external input element and remove its placeholder class.
• No special CSS or anything needed.

For step 2, this is my 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 } } 

Here is my HTML code:

 <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>