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

默认情况下，您可以将type设置为text，并在移除password课程时将其更改为watermark。

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 2

使用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 3

您可以使用placeholder输入属性。

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

请参阅此jsFiddle Link

Answer 4

如果要支持Internet Explorer，可以在输入字段顶部使用浮动标签。即，<input>标记具有相应的<label>标记，其在CSS中具有float: left，并且它们被定位以使标签位于输入字段的顶部。您还需要将.click()事件处理程序添加到激活输入字段并隐藏标签的标签，并在输入字段上分别隐藏和显示标签.focus()和.blur()

如果您不需要支持Internet Explorer，placeholder标记的<input>属性就足够了。

Answer 5

为什么不简单呢

添加placeholder="your initial value"将解决我希望的问题。

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来检查是否设置了值并且等于默认设置值onfocus或onblur

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

Answer 8

我很惊讶没有人提到Mathrias的jQuery Placeholder plugin。它允许对不支持HTML5的旧浏览器使用占位符属性，如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');
        }
    });
});

如何在密码字段中添加文本水印？

9 个答案: