标签动画 (material angular) 导致默认文本“输入位置”出现问题 Google 地图地点 API

Question

我有一个 angular input text，我通过 Google Places API 用于 select 一个位置。 这是输入：

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

在 javascript 中，我有一个简单的脚本来使输入有效并使用 angular directive.

检索位置

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

我也尝试过使用 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;
}