jquery - 如何在密码字段中放置文本水印？

Question

我想要在我的密码字段中显示“密码”的水印。

这是我的代码:
查询:

$(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

可以将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');
        }
    });

检查 fiddle - http://jsfiddle.net/w4Hh4/1/