目录：

一、

二、

三、

　　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库：

　　密码的input如下：

　　由于我们之前为了显示：”请输入您的密码” 将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里。

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

 

 

作者：

出处：

 

本文版权归和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。