1

我的应用程序试图在表单的文本框中显示文本水印，但我不想触摸框的实际值。所以，我正在尝试使用带有水印文本的背景图像，使用类；

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

    .watermarkoff input
   {
        background-image: none;
   }

我在表单中设置文本框 CssClass="watermarkon"，当点击这样的元素时，我想删除“watermarkon”并替换为“watermarkoff”，甚至只是删除现有的类。我在语法上尝试了很多不同的尝试，虽然我可以很好地捕获点击事件，但页面似乎永远不会更新元素的 CSS。这是我最近的尝试：

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

             });
         }
     );

谁能告诉我我错过了什么 - 为什么我似乎无法通过 CSS 更改来更新实时网页？

提前致谢！

4

5 回答 5

1

你的选择器是错误的

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

         });
     }
 );
于 2010-08-31T14:16:31.900 回答
1

由于该类直接位于文本框上，因此您的 CSS 选择器应该具有 on 类input，没有<input>子元素，因此将它们更改为：

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

还有更简化的 jQuery 来匹配：

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

您通常希望更改和上的水印样式，而不是单击focus（blur通过额外的检查，具体取决于您所追求的）。watermarkoff这将在聚焦时将类更改为，并在使用交换类进行watermarkon模糊时恢复。.toggleClass()

于 2010-08-31T14:17:32.443 回答
0

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!

于 2010-08-31T14:57:36.427 回答
0

使用选择器.watermarkon input，您尝试选择具有 class 的另一个元素内的所有输入元素watermarkon。

此外，如果您删除该类，watermarkon那么您将无法使用包含.watermarkon.

所以尝试这样做：

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');
});
于 2010-08-31T14:23:13.223 回答
0

根据您的 CSS 和 jQuery，这就是您想要做的：

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

         });
     }
 );

问题是样式表input中没有.watermarkon或.watermarkoff没有，并且没有按您期望的那样显示。

于 2010-08-31T14:23:14.303 回答