?
Solved

Watermark search textbox on Blogger theme

Posted on 2012-08-19
3
Medium Priority
?
712 Views
Last Modified: 2012-09-11
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?!
0
Comment
Question by:mandi224
  • 2
3 Comments
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 38310225
All you need to do is add placeholder to the input

<input type="text" name="textfield" id="textfield" placeholder="some text">
0
 

Author Comment

by:mandi224
ID: 38310245
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 38310271
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month16 days, 13 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question