jQuery水印StackOverflow像？

Question

我想实现像StackOverflow的水印功能。

我为此使用了jquery-watermark。我遇到的问题是水印文本随着输入元素获得焦点而消失，这在SO中不会发生（我也不希望它在我的实现中）

是否有一些快速修复我能做到这一点，或者可能是一个更像SO的水印库？

Answer 1

我想你是指PlaceHolder文字，只要没有输入就被输入到输入字段中。而且你希望它只会在用户输入一些文字而不是一次对焦字段后消失？

a）我不鼓励这样做。我目前正在使用JSFiddle来实现这一点，并不是那么简单。而且还有现代浏览器会为您呈现的HTML5 Placeholder attribute“本地”提供此功能。

b）这有点棘手。但是here is the JSFiddle显示了相关的代码。

这里从小提琴代码：

$("#item") 
    .addClass("watermark") 
    .val("Watermark") 
    .data('wm', true) 
    .focus(function() { 
     if ($(this).data('wm') === true) { 
      var that = this; 
      setTimeout(function() { 
       that.setSelectionRange(0,0); 
      }, 50); 
     } 
    }) 
    .keydown(function (evt) { 
     if ($(this).data('wm') === true) { 
      $(this).val($(this).val().replace('Watermark', '')); 
      $(this).data('wm', false); 
      $(this).removeClass('watermark'); 
     }  
    }) 
    .blur(function() { 
     if ($(this).val().length === 0) { 
      console.log("ran change"); 
      $(this) 
       .addClass("watermark") 
       .val("Watermark") 
       .data('wm', true); 

     } 
    }); 

我敢肯定的代码能够进一步提高，也许投入到它自己的jQuery插件。还请注意，我如果它工作在IE浏览器没有测试..（Js仍然有一些硬编码值）

Answer 2

这里使用的方法非常狡猾。文字不会消失的原因是因为它实际上并不是input元素的一部分。输入字段后面有一个span，跨度占位符文本。占位符文本的“调暗”效果通过操作输入元素的不透明度来实现。

• 当输入字段模糊且为空时，其不透明度为40％。 （占位符跨度显示相当好。）

• 当输入字段为焦点并为空时，其不透明度为〜60％。 （占位符范围通过模糊显示。）

• 当输入字段包含数据时，其不透明度为100％。 （占位符跨度不通过在所有显示。）

就个人而言，我喜欢使用一个placeholder属性作为由Tigraine描述的方法。 尽管HTML5还没有最终确定，但我更喜欢使用单独的元素来保存文本。 （严格地说有关客户端HTML） 关于第二个想法，它确实降低而漂亮...

Answer 3

我写this JSFiddle另一个问题，但它工作得很好。它所做的是尽可能无缝地提供一个jQuery回退到HTML5 placeholder属性。当水印文本出现时，它甚至可以完成整个“较轻的文本”。希望它能解决你的问题。从小提琴

代码：

$(document).ready(function() { 
    $("input:text").each(function() { 
     $(this).data("placeholder", $(this).attr("placeholder")).addClass("placeholder"); 
    }); 

    $("input:text").live("focus", function() { 
     if($(this).val() == $(this).data("placeholder")) 
     { 
      $(this).val('').removeClass("placeholder"); 
     } 
    }); 

    $("input:text").live("blur", function() { 
     if(!$(this).val().length) 
     { 
      $(this).val($(this).data("placeholder")).addClass("placeholder"); 
     } 
    }); 
});