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

页面导航:首页 > 网络编程 > JavaScript > JQuery实现密码有短暂的显示过程和实现input hint效

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

来源: 作者: 时间:2016-02-04 09:15 【

目录:一、实现目的二、问题思考三、解决办法 1、输入用户名 2、输入密码短暂显示一、实现目的 这几天做项目的时候,客户要求在文本框输入密码的时候,要求密码有短暂的显示过程

目录:

一、实现目的

二、问题思考

三、解决办法

  1、输入用户名

  2、输入密码短暂显示

一、实现目的

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

\

\

二、问题思考

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

三、解决办法

1.输入用户名

  •   写一个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()
       })
    };

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

    2.输入密码短暂显示

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

      密码的input如下:

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

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

    \

      会存在一个id为password—0的input,这个就是我们引入的IPass.packed.js自动生成的。<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+oaGhodTaztK1xMDtveK/tMC0o6zPyMrH0LTSu7j2dHlwZc6qcGFzc3dvcmS1xGlucHV0o6y1vMjrtcRqc7vh1NrV4rj2tcS7+bShyc/X1LavyfqzydK7uPbQwrXEaW5wdXSjrNXiuPZpbnB1dMrHtcR0eXBlzqp0ZXh0o6y/ydLUz9TKvsPcwuuho9PrztLDx9aux7DQtLrDtcR0eXBlzqpwYXNzd29yZLXEaW5wdXS9q73hus+jrMq1z9bD3MLrtszU3c/Uyr65/bPMoaM8L3A+CjxwPqGhoaE8c3Ryb25nPsi7uvPO0sPH1Npkb2N1bWVudC5yZWFkecDvvNPI66O6PC9zdHJvbmc+PC9wPgoKPHByZSBjbGFzcz0="brush:java;">$(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里。

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

    Tags:

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <