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"); 
     } 
    }); 
});