如何將密碼字段中的文字水印？

Question

我想在我的密碼字段中顯示「密碼」的水印。

這裏是我的代碼：
的jQuery：

$(document).ready(function() { 

    var watermark = 'Password'; 

    //init, set watermark text and class 
    $('#input_pwd').val(watermark).addClass('watermark'); 

    //if blur and no value inside, set watermark text and class again. 
    $('#input_pwd').blur(function(){ 
     if ($(this).val().length == 0){ 
      $(this).val(watermark).addClass('watermark'); 
     } 
    }); 

    //if focus and text is watermrk, set it to empty and remove the watermark class 
    $('#input_pwd').focus(function(){ 
     if ($(this).val() == watermark){ 
      $(this).val('').removeClass('watermark'); 
     } 
    }); 
}); 

HTML：

<input class="ui_input" id="input_pwd" type="password" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" required /> 

我的jsfiddle： click here

編輯：我喜歡jQuery的:)

編輯：我們的兄弟Konrad Gadzina給了我我正在尋找的東西，但是感謝所有人的努力！

Answer 1

使用html的placeholder

<input class="ui_input" id="input_pwd" type="password" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" placeholder='Password' required /> 

而且你不需要任何的js它。

注：Internet Explorer 10，Firefox，Opera，Chrome和Safari支持佔位符屬性。不幸的是，如評論所述，它不適用於較老的IE

Answer 2

如果要支持Internet Explorer，可以在輸入字段頂部使用浮動標籤。即，<input>標籤具有相應的<label>標籤，其在CSS中具有float: left，並且它們被定位爲使得標籤位於輸入字段的頂部。您還需要將.click()事件處理程序添加到激活輸入字段並隱藏標籤的標籤，並在分別隱藏和顯示標籤的輸入字段上添加.focus()和.blur()。

如果您不需要支持Internet Explorer，<input>標記的placeholder屬性應該就足夠了。

Answer 3

爲什麼不能簡單的做

添加placeholder="your initial value"將解決我希望這個問題。

Answer 4

您可以使用placeholder輸入屬性。

Username:<input type='text' placeholder="Username"/> <br/> 
Password: <input type='text' placeholder="Password"/> 

請參閱本jsFiddle Link

Answer 5

您可以設置type是text默認情況下，並在除去watermark類其與JS改變password。

HTML：

<input class="ui_input" id="input_pwd" type="text" name="pass" id="pass" style="height:25px; width:250px; font-size:14px;" required /> 

JS：

//if blur and no value inside, set watermark text and class again. 
    $('#input_pwd').blur(function(){ 
     if ($(this).val().length == 0){ 
      $(this).val(watermark).addClass('watermark'); 
      $(this).attr('type', 'text'); 
     } 
    }); 

    //if focus and text is watermrk, set it to empty and remove the watermark class 
    $('#input_pwd').focus(function(){ 
     if ($(this).val() == watermark){ 
      $(this).val('').removeClass('watermark'); 
      $(this).attr('type', 'password'); 
     } 
    }); 

檢查小提琴 - http://jsfiddle.net/w4Hh4/1/

Answer 6

如果您不能使用HTML5，然後嘗試通過@每第一個答案建議切換模式Konrad Gadzina或試試這個小提琴：http://jsfiddle.net/w4Hh4/3/

將密碼框旁邊的文本框放在焦點和模糊處。

$(document).ready(function() { 

    var watermark = 'Password'; 

    //init, set watermark text and class 
     $('#input_pwd').hide(); 
     $('#input_pwd_fake').val(watermark).addClass('watermark'); 

//if blur and no value inside, set watermark text and class again. 
$('#input_pwd').blur(function(){ 

    if ($(this).val() == ''){ 
     $(this).hide(); 
     $('#input_pwd_fake').show().val(watermark).addClass('watermark'); 
    } 
}); 

//if focus and text is watermrk, set it to empty and remove the watermark class 
$('#input_pwd_fake').focus(function(){ 
    $(this).hide(); 
    $('#input_pwd').show().focus(); 
}); 
}); 

Answer 7

這將工作的跨瀏覽器，因爲它是一個簡單的JavaScript來檢查值設置，等於默認設定值或者聚焦狀態或的onblur

<input type="password" onfocus="if(this.value=='Password') {this.value='';}" onblur="if(this.value=='') {this.value='Password'}" value="Password" /> 

Answer 8

我很驚訝，沒有人提到jQuery Placeholder plugin由Mathrias提供。它允許對不支持HTML5的舊瀏覽器使用placeholder屬性，如IE8。

演示：http://mathiasbynens.be/demo/placeholder

小心字體不過，IE8不支持密碼字段爲點自定義字體。

Answer 9

在CSS

input.watermark { 
    color: #D3D3D3; font-weight: 400; 
} 

的jQuery設置一個類水印： -

$(document).ready(function() { 

    var watermark = ''; // watermark value 

    $('#myID').val(watermark).addClass('watermark'); 

    $('#myID').blur(function(){ 
     if ($(this).val().length == 0){ 
      $(this).val(watermark).addClass('watermark'); 
     } 
    }); 

    $('#input_fname').focus(function(){ 
     if ($(this).val() == watermark){ 
      $(this).val('').removeClass('watermark'); 
     } 
    }); 
});