我正在使用Google Maps Places API自动填充功能在页面上提供位置自动填充功能,类似于:https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
我也使用Google Material Design Lite来设置输入框的样式 . 除了占位符文本之外,这一切都正常 . MDL使用label tags提供占位符文本和突出显示下划线,但Google Maps Places API在输入标记上使用placeholder attribute,它似乎会覆盖MDL占位符文本并停止下划线效果;另外,看起来我不能将占位符文本设置为不同的颜色/不透明度 .
我希望能够关闭Google Maps Places API占位符文本,但即使将该属性设置为空字符串也会破坏Google MDL标签(不会显示占位符文字) .
有没有办法阻止Google Maps API在我的输入框中放置占位符文字?
4 回答
你只需要在你的输入html中添加:
placeholder=""
事实证明,MDL有一个“has-placeholder”CSS类,它阻止为具有占位符属性的输入文本框显示标签 .
将占位符属性设置为空会使谷歌 Map 将“输入位置”放入文本框,但该属性会导致MDL的CSS隐藏标签占位符 .
为了解决这个问题,我覆盖了“has-placeholder”MDL CSS以修复可见性 . 举个例子,这是我的MDL文本字段:
这是用于修复可见性的CSS:
Robert Sharp 's answer didn'为我工作(没效果)
MacPrawn:输入元素中没有占位符会让Google自动创建一个占位符,因此您会坚持使用它
这是我做的:
将input元素的占位符属性设置为空字符串 .
placeholder=""
在input元素的外部div的mdl-componentupgraded元素上添加一个事件侦听器,并删除其has-placeholder类 .
没有特殊的CSS或任何需要的东西 .
对于第2步,这是我的JavaScript:
这是我的HTML代码:
你遇到了同样的问题 . AutoComplete方法中的第二个对象是选项,你可以简单地传递
placeholder
作为undefined