web-dev-qa-db-ja.com

Google Maps PlacesAPIからプレースホルダーテキストを削除します

Google Maps Places APIのオートコンプリート機能を使用して、次のような場所のオートコンプリートをページに提供しています： https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete- addressform

また、 Google Material Design Lite を使用して入力ボックスのスタイルを設定しています。プレースホルダーテキストを除いて、これはすべて正常に機能しています。 MDLは labelタグ を使用してプレースホルダーテキストと強調表示の下線を提供しますが、Google Maps Places APIは placeholder属性 入力タグ上。これはMDLプレースホルダーテキストを上書きし、下線効果が機能しないように見えます。さらに、プレースホルダーテキストを別の色/不透明度にスタイル設定できないようです。

Google Maps Places APIのプレースホルダーテキストをオフにできるようにしたいのですが、属性を空の文字列に設定しても、Google MDLラベルが壊れて表示されます（プレースホルダーテキストは表示されません）。

Google Maps APIが入力ボックスにプレースホルダーテキストを入力しないようにする方法はありますか？

javascripthtmlgoogle-mapsgoogle-maps-api-3google-places-api
15
Robert Sharp

入力htmlを追加するだけです：placeholder=""

12
Greencame

MDLには、プレースホルダー属性を持つ入力テキストボックスのラベルの表示を防ぐ「has-placeholder」CSSクラスがあることがわかりました。

プレースホルダー属性を空に設定すると、Googleマップはテキストボックスに「場所を入力してください」と入力しなくなりますが、この属性により、MDLのCSSはラベルプレースホルダーを非表示にします。

これを修正するために、「has-placeholder」MDLCSSをオーバーライドして可視性を修正しました。例として、これが私の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;
}
1
Robert Sharp
  • ロバートシャープの答えは私にはうまくいきませんでした（効果なし）
  • MacPrawn：input要素にプレースホルダーがないため、Googleが自動的にプレースホルダーを作成するので、それで行き詰まります。

これが私がしたことです：

  1. 入力要素のプレースホルダー属性を空の文字列に設定します。 placeholder=""
  2. 入力要素の外部divのmdl-componentupgraded要素にイベントリスナーを追加し、そのhas-placeholderクラスを削除します。
  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>
0
user3069376

プレースホルダー属性を「＆nbsp」に設定します

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