Change css class with JQuery \ Watermark

Question

My application is trying to show a text watermark in a textbox on a form, but I don't want to touch the actual value of the box. So, I'm trying to use a background image with the watermark text, using classes;

    .watermarkon input
   {
        background-image: url('../forms/images/TypeNameWatermark.png');
        background-repeat:no-repeat;
   }

    .watermarkoff input
   {
        background-image: none;
   }

I'm setting the textboxes CssClass="watermarkon" in the form, and when such an element is clicked, I'd like to remove the "watermarkon" and replace with "watermarkoff" or even just remove the existing class. I've tried a ton of different attempts at the Syntax, and though I can capture the click event fine, the page never seems to update the element's CSS. Here is my latest attempt:

     jQuery(document).ready(
         function() {
             jQuery(".watermarkon input").click(function(event) {
                 jQuery(this).removeClass("watermarkon").addClass("watermarkoff");

             });
         }
     );

Can anyone tell me what I'm missing - why I can't seem to get the CSS change to update the live web page?

Thanks in advance!

Answer 1

You selector is wrong

 jQuery(document).ready(
     function() {
         jQuery("input.watermarkon").click(function(event) {
             jQuery(this).removeClass("watermarkon").addClass("watermarkoff");

         });
     }
 );

Answer 2

Since the class is on the textbox directly, your CSS selectors should have the class on input, not having an <input> element as a child, so change them to this:

input.watermarkon
//and...
input.watermarkoff

And a bit more simplified jQuery to match:

jQuery("input.watermarkon").bind("blur focus", function() {
  jQuery(this).toggleClass("watermarkon watermarkoff");
});

Rather than a click, you typically want to change the watermark styling on focus and blur (with additional checks, depending on what you're after). This will change the class to watermarkoff when focusing, and restore watermarkon when blurring using .toggleClass() to swap the classes.

Answer 3

With the selector .watermarkon inputyou try to select all input elements inside another element that has the class watermarkon.

Also, if you remove the class watermarkon then you are not able to select the element again with a selector that includes .watermarkon.

So try to do it like this:

HTML:

<input type="text" class="watermark"/>

CSS:

.watermark {
    background-image: url('../forms/images/TypeNameWatermark.png'); 
    background-repeat:no-repeat;
}

jQuery:

$('input').click(function() {
    $(this).removeClass('watermark');
});

Answer 4

Based on your CSS and jQuery, this is what you want to be doing:

 jQuery(document).ready(
     function() {
         jQuery(".watermarkon input").click(function(event) {
             jQuery(this).parents('.watermarkon').removeClass("watermarkon").addClass("watermarkoff");

         });
     }
 );

The issue is that the input doesn't have .watermarkon or .watermarkoff in the stylesheet, and nothing displays as you expect it to.

Answer 5

Thanks to everyone for their help, I'm new to JS and JQuery and don't understand objects and inheritances well yet. I looked at all answers and tried a number of things. In my particular app, we have to use . input as I am working with custom programmed asp.net controls and if the "input" is missing, the CSS won't work on text boxes.

The code I ended up using was:

     jQuery(document).ready(
         function() {
             jQuery('.watermarkon').click(function(event) {
             jQuery(this).removeClass('watermarkon').addClass('watermarkoff');
             });
         }
     );

And I think it actually worked because of fixing my mis=use of double vs single quotes in the original code?

Thanks again for all of the replies!