Watermark search textbox on Blogger theme

Is there a way to add a watermark to the textbox for the default search "gadget" from Blogger?

Here's my test site: http://pdmtest2.blogspot.com/ 

I'm using CSS to hide the submit button, so you can just type and press enter to submit. The client wants the textbox to be watermarked "Type + Search" and I can't figure out how to do it...

I was playing around with something like:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 var watermark = 'Type + Search';
 $('.gsc-input').blur(function(){
  if ($(this).val().length == 0)
    $(this).val(watermark).addClass('watermark');
 }).focus(function(){
  if ($(this).val() == watermark)
    $(this).val('').removeClass('watermark');
 }).val(watermark).addClass('watermark');
});
</script>

Open in new window

(Taken from here: http://www.davidjrush.com/blog/2011/10/jquery-creating-a-textbox-text-watermark/)

But it doesn't seem to be working ... any ideas?!
mandi224Asked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
All you need to do is add placeholder to the input

<input type="text" name="textfield" id="textfield" placeholder="some text">
0
 
mandi224Author Commented:
Unfortunately, I don't believe I can edit the input tag in the new blogger theme format? The gadget/widget for search seems to get inserted automatically in the theme here:

<b:widget id='CustomSearch1' locked='false' title=' ' type='CustomSearch'>

So I can't add "placeholder" to the input element.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Ok, what you have seems to work fine in jsfiddle.  I did notice the rendered html has,  class=" gsc-input".  I wonder if the space before gsc has something to do with it.  Can you try class="gsc-input".

Another option would be to try to change

$('.gsc-input').blur(function(){

to
 $('input.gsc-input').blur(function(){
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.