JQuery实现密码有短暂的显示过程和实现 input hint效果

Posted LisenYang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery实现密码有短暂的显示过程和实现 input hint效果相关的知识,希望对你有一定的参考价值。

实现目的

这几天做项目的时候,客户要求在文本框输入密码的时候,要求密码有短暂的显示过程,如下图:

 

问题思考

 

首先解决的是如何在input框里实现类似于androidhint属性,html5中添加placeholder,但是现在不是html5,怎么办?

 

解决办法

 

以输入用户名为例:

<li>
 <input name="textfield" type="text" id="usern"  value="请输入您的用户名"  class="input userName inputholder" />
</li>

 

写一个JS

 

$.fn.inputholder=function()
    var dval=$(this).val();
    $(this).focus(function()
        $(this).val('').addClass('focous');
        ).blur(function()
        if($(this).val()=='')
            $(this).val(dval).removeClass('focous');
            
        );
    ;
var inputholder=$('.inputholder');
if(inputholder.length)
    inputholder.each(function() 
      $(this).inputholder()
   )
;

当输入框获得焦点的时候,将这个值清空,当丢失焦点的时候,再将之前已经存好的值付给输入框。

 

下面解决密码输入时有短暂的显示效果:

 

从网上找到了一个Js库: IPass.packed.js

密码的input如下:

<li>
     <input name="pwdPrompt" type="text" id="textfield2" value="请输入您的密码" class="input passWord inputholder"/>
     <input name="pwd" type="password" id="password" class="input passWord hide"  />
</li>

 

由于我们之前为了显示:”请输入您的密码” 将input的type设为text  所以我们又写了一个input,将其type设为password 并且将这个input隐藏。

 

在浏览器的开发人员工具中我们可以看到:

会存在一个id为password—0的input,这个就是我们引入的IPass.packed.js自动生成的。

在我的理解看来,先是写一个type为password的input,导入的js会在这个的基础上自动生成一个新的input,这个input是的type为text,可以显示密码。

与我们之前写好的type为password的input将结合,实现密码短暂显示过程。

然后我们在document.ready里加入:

$(document).ready(function()
    // to enable iPass plugin
    $("input[type=password]").iPass();
    $("input[name=pwdPrompt]").focus(function ()  
        $("input[name=pwdPrompt]").hide(); 
        $("input[name=password-0]").show().focus(); 
    ); 
    $("input[name=password-0]").blur(function ()  
        if ($(this).val() == "")  
            $("input[name=pwdPrompt]").show(); 
            $("input[name=password-0]").hide(); 
         
    );
    
);

注意:这个必须写在document.ready 里,而不是写在js里。

主要还是通过隐藏和显示来控制显示,从而达到密码短暂显示和提示字体隐藏的功能。

以上是关于JQuery实现密码有短暂的显示过程和实现 input hint效果的主要内容,如果未能解决你的问题,请参考以下文章

Android 设置密码文本是否暂时显示字符

Mysql存储过程使用LEAVE实现MSSQL存储过程中return语法

js实现短暂提示框

Jquery 实现密码框的显示与隐藏转载自http://blog.csdn.net/fengzhishangsky/article/details/11809069

用jquery怎么实现点击密码输入框,上面的提示文字“请输入密码”消失,失去焦点时候提示文字又存在

使用JavaScript或jquery实现动态交互效果: 点击登录和注册时,可以完成登录和注册tab的切换