[英]Html/Javascript input onFocus Watermark
I have a made a custom search box for google custom search. 我为Google自定义搜索创建了一个自定义搜索框。 In order of the branding terms I need to have a watermark in the search box.
为了使用品牌字词,我需要在搜索框中添加水印。 I have tried to use the onFocus attribute in html but this is the wrong approach for me.
我试图在html中使用onFocus属性,但这对我来说是错误的方法。 I want the same style as this Example .
我想要与本示例相同的样式。
When I try to use the onFocus it only "apply" once. 当我尝试使用onFocus时,它仅“应用”一次。 So if i higlight the input box the custom search image disseaper, but when i click on another element the image stay disseapered and does not return.
因此,如果我在输入框中高亮显示了自定义搜索图像,那么当我单击另一个元素时,图像将保持不可见状态,并且不会返回。
I have also tried to use the following script below, but that only gives me a input box inside my alleredy custom search box. 我也尝试过使用以下脚本,但这仅在我的自定义搜索框内提供了一个输入框。
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>
How can i make a same effect that google custom search ? 我该如何取得与Google自定义搜索相同的效果?
You should be able to just create a CSS class or you could include an inline style with the background-image:
property and assign it to the <input>
tag. 您应该只能够创建CSS类,或者可以在
background-image:
属性中包含内联样式并将其分配给<input>
标记。 Try something like this... 试试这样的东西...
.InputFieldBkgd
{
background-image: url(images/imageName.png);
background-repeat: no-repeat;
}
when you fire off your onFocus
event, you can remove this class and assign a different class that does not have a background-image property. 当您
onFocus
事件时,可以删除此类并分配一个没有background-image属性的其他类。 then onBlur
assign the original class to add the image back. 然后
onBlur
分配原始类以将图像添加回去。
在页面加载后(即,甚至在自定义搜索框加载后)运行脚本并添加一个占位符。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.