jquery - 标签动画( Material Angular )导致默认文本出现问题 “Enter a Location” Google Maps Places API

Question

我有一个 Angular 输入文本，我用它通过 Google Places API 选择位置。这是输入:

<md-input-container style="width: 30%;">
  <label>Location</label>
  <input type="text" id="gplace" googleplace>
</md-input-container>

在 javascript 中，我有一个简单的脚本来使输入工作并使用 Angular 指令 检索位置。

问题出在 Google 提供的标签“位置”和默认占位符(“输入位置”)上。我可以通过设置我自己的 占位符(即空白，这是我最终需要的)来删除默认的占位符，以便不将任何内容显示为 this question solves 。但如果我这样做，标签动画“停止工作”，并且无论我是否插入文本，提到的标签始终保持在上方。

我还尝试使用 jQuery 删除占位符并执行类似 $('#elem').removeAttr('placeholder'); 的操作，但它没有别耍花招。

所以，我需要的是标签动画工作正常，输入中没有任何文本。

Here is a simple working plunker of the input 。然而，它并不代表问题，因为它不允许我覆盖占位符，但它对您尝试在本地重现情况很有用。

Answer 1

最后我自己解决了。我只是将占位符的 visibility 属性设置为 hidden，如下所示:

#gplace::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    visibility: hidden;
}
#gplace::-moz-placeholder { /* Firefox 19+ */
    visibility: hidden;
}
#gplace:-ms-input-placeholder { /* IE 10+ */
    visibility: hidden;
}
#gplace:-moz-placeholder { /* Firefox 18- */
    visibility: hidden;
}