4

我想在我的密码字段中添加一个水印，上面写着“密码”。

这是我的代码：
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： 点击这里


编辑：我更喜欢 jquery :)

编辑：我们的兄弟 Konrad Gadzina 给了我我想要的东西，但感谢大家的努力！

4

9 回答 9

8

您可以将其设置type为text默认值，并在删除类password时使用 JS 将其更改为。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/

于 2013-04-26T10:02:41.193 回答
5

使用 htmlplaceholder

<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 支持 placeholder 属性。不幸的是，如评论中所述，它不适用于旧版 IE

于 2013-04-26T10:01:20.013 回答
3

您可以使用placeholder输入属性。

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

请看这个jsFiddle 链接

于 2013-04-26T10:02:39.917 回答
0

Set a class for the watermark in 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');
        }
    });
});
于 2013-04-28T15:29:55.490 回答
0

为什么不简单呢

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

于 2013-04-26T10:02:35.320 回答
0

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

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

于 2013-04-26T10:02:26.663 回答
0

如果您不能使用 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();
});
});
于 2013-04-26T10:12:05.763 回答
0

这将跨浏览器工作，因为它是一个简单的 JavaScript 来检查是否设置了值并等于默认设置值 onfocus 或 onblur

<input type="password" onfocus="if(this.value=='Password') {this.value='';}" onblur="if(this.value=='') {this.value='Password'}" value="Password" />
于 2013-04-26T10:23:23.470 回答
0

我很惊讶没有人提到 Mathrias 的jQuery Placeholder 插件。它允许对不支持 HTML5 的旧浏览器（如 IE8）使用占位符属性。

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

不过要小心字体，IE8 不支持自定义字体的密码字段中的点。

于 2013-04-26T10:36:29.723 回答