Html / Javascript输入onFocus Watermark

Question

我为Google自定义搜索设置了自定义搜索框。按品牌术语排序，我需要在搜索框中添加水印。我试图在html中使用onFocus属性，但这对我来说是错误的方法。我想要与这个Example相同的风格。

当我尝试使用onFocus时，它只“应用”一次。因此，如果我高亮显示输入框自定义搜索图像更加便宜，但是当我点击另一个元素时，图像会保持分离并且不会返回。

我还尝试使用下面的以下脚本，但这只会在我的自定义搜索框中输入一个输入框。

<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>

如何制作与谷歌自定义搜索相同的效果？

Answer 1

您应该只能创建一个CSS类，或者可以包含具有background-image:属性的内联样式，并将其分配给<input>标记。尝试这样的事情......

.InputFieldBkgd
{
    background-image: url(images/imageName.png);
    background-repeat: no-repeat;
}

当您启动onFocus事件时，您可以删除此类并指定一个不具有background-image属性的其他类。然后onBlur指定原始类以添加图像。

Answer 2

在页面加载后运行脚本（即使在加载自定义搜索框之后）并添加占位符。