如何在密码字段中添加文本水印？ [英] How to put a text watermark in a password field?

问题描述

我想在我的密码字段中输入一个水印，其中显示密码。


这是我的代码：

jquery：

  $（document）.ready（function（）{
 
 var watermark ='密码'; 
 
 / / init，设置水印文本和类
 $（'＃input_pwd'）。val（水印）.addClass（'水印'）; 
 
 //如果模糊且没有内部值，设置水印文本和类再次。
 $（'＃input_pwd'）。blur（function（）{
 if（$（this）.val（）。length == 0）{
 $ （this）.val（watermark）.addClass（'watermark'）; 
} 
}）; 
 
 //如果focus和text是watermrk，则将其设置为empty删除水印类
 $（'＃input_pwd'）。focus（function（）{
 if（$（this）.val（）== watermark）{
 $（this）。 val（''）。removeClass（'watermark'）; 
} 
}）; 
}）; 
  

html：

 < input class =ui_inputid =input_pwdtype =passwordname =passid =passstyle =height：25px; width：250px; font-size：14px; 必需/> 
  

我的jsfiddle：
点击这里

编辑：我更喜欢jquery :)



编辑：我们的兄弟Konrad Gadzina给了我我正在寻找的东西，但是感谢所有人的努力！

解决方案

默认情况下，您可以将类型设置为 text ，并将其更改为在删除水印类时使用JS的密码

HTML：

 < input class =ui_inputid =input_pwdtype =textname =passid =passstyle = height：25px; width：250px; font-size：14px;必需/> 
  

JS：

  //如果模糊且没有值，请重新设置水印文本和类。 
 $（'＃input_pwd'）。blur（function（）{
 if（$（this）.val（）。length == 0）{
 $（this）.val（水印）.addClass（'watermark'）; 
 $（this）.attr（'type'，'text'）; 
} 
}）; 
 
 //如果focus和text是watermrk，将其设置为empty并移除水印类
 $（'＃input_pwd'）。focus（function（）{
 if（ $（this）.val（）==水印）{
 $（this）.val（''）。removeClass（'watermark'）; 
 $（this）.attr（'type'， 'password'）; 
} 
}）; 
  

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

I want a watermark in my password field which says "Password".

Here is my code:
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 />

My jsfiddle: click here

edit: I prefer jquery :)

edit: Our brother Konrad Gadzina has given me what I was looking for but thanks for all your efforts everyone!

解决方案

You can set the type to be text by default and change it to password with JS while removing watermark class.

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

Check fiddle - http://jsfiddle.net/w4Hh4/1/

这篇关于如何在密码字段中添加文本水印？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！