qdjianghao 2015-1-13 10:58
JQuery实现密码有短暂的显示过程和实现input hint效果
[table][tr][td] [/td][/tr][/table]
[table=98%,rgb(21, 112, 166)][tr][td][b]一、实现目的[/b][/td][/tr][/table][font=Georgia,] 这几天做项目的时候，客户要求在文本框输入密码的时候，要求密码有短暂的显示过程，如下图：[/font]
[font=Georgia,][img]http://images.cnitblog.com/blog/708076/201501/101645443288447.jpg[/img][/font]
[font=Georgia,][img]http://images.cnitblog.com/blog/708076/201501/101645539685769.jpg[/img][/font]
[table=98%,rgb(21, 112, 166)][tr][td][b]二、问题思考[/b][/td][/tr][/table][font=Georgia,] 首先解决的是如何在input框里实现类似于android中hint属性，html5中添加placeholder，但是现在不是html5，怎么办？一开看一下杰瑞教育的小伙伴是怎么处理的！[/font]
[table=98%,rgb(21, 112, 166)][tr][td][b]三、解决办法[/b][/td][/tr][/table][b]1.输入用户名[/b] [color=#00ff]<</SPAN>[color=#8000]li[/color]> <</SPAN>[color=#8000]input [/color][color=#ff00]name[/color]="textfield"[color=#ff00] type[/color]="text"[color=#ff00] id[/color]="usern"[color=#ff00] value[/color]="请输入您的用户名"[color=#ff00] class[/color]="input userName inputholder" /> </</SPAN>[color=#8000]li[/color]>[/color]
[font=Georgia,] 写一个JS：[/font]
[url=][img]http://common.cnblogs.com/images/copycode.gif[/img][/url]
$.fn.inputholder=[color=#00ff]function[/color](){ [color=#00ff]var[/color] dval=$([color=#00ff]this[/color]).val(); $([color=#00ff]this[/color]).focus([color=#00ff]function[/color](){ $([color=#00ff]this[/color]).val('').addClass('focous'); }).blur([color=#00ff]function[/color](){ [color=#00ff]if[/color]($([color=#00ff]this[/color]).val()==''){ $([color=#00ff]this[/color]).val(dval).removeClass('focous'); } }); }; [color=#00ff]var[/color] inputholder=$('.inputholder'); [color=#00ff]if[/color](inputholder.length){ inputholder.each([color=#00ff]function[/color]() { $([color=#00ff]this[/color]).inputholder() }) }; [url=][img]http://common.cnblogs.com/images/copycode.gif[/img][/url]
[font=Georgia,] 当输入框获得焦点的时候，将这个值清空，当丢失焦点的时候，再将之前已经存好的值付给输入框。[/font]
[b]2.输入密码短暂显示[/b][font=Georgia,] 从网上找到了一个Js库，下载请到杰瑞教育百度云盘： [url=http://pan.baidu.com/s/1kT5Piq7]IPass.packed.js[/url][/font]
[font=Georgia,] [b]密码的input如下：[/b][/font]
[color=#00ff]<</SPAN>[color=#8000]li[/color]> <</SPAN>[color=#8000]input [/color][color=#ff00]name[/color]="pwdPrompt"[color=#ff00] type[/color]="text"[color=#ff00] id[/color]="textfield2"[color=#ff00] value[/color]="请输入您的密码"[color=#ff00] class[/color]="input passWord inputholder"/> <</SPAN>[color=#8000]input [/color][color=#ff00]name[/color]="pwd"[color=#ff00] type[/color]="password"[color=#ff00] id[/color]="password"[color=#ff00] class[/color]="input passWord hide" /> </</SPAN>[color=#8000]li[/color]>[/color]
[font=Georgia,] 由于我们之前为了显示：”请输入您的密码” 将input的type设为text 所以我们又写了一个input，将其type设为password 并且将这个input隐藏。[/font]
[font=Georgia,] 在浏览器的开发人员工具中我们可以看到：[/font]
[font=Georgia,][img]http://images.cnitblog.com/blog/708076/201501/101649348754747.jpg[/img][/font]
[font=Georgia,] 会存在一个id为password—0的input，这个就是我们引入的IPass.packed.js自动生成的。[/font]
[font=Georgia,] 杰瑞教育的老师解释的是，先是写一个type为password的input，导入的js会在这个的基础上自动生成一个新的input，这个input是的type为text，可以显示密码。与我们之前写好的type为password的input将结合，实现密码短暂显示过程。[/font]
[font=Georgia,] [b]然后我们在document.ready里加入：[/b][/font]
[url=][img]http://common.cnblogs.com/images/copycode.gif[/img][/url]
$(document).ready([color=#00ff]function[/color](){ [color=#0800]//[/color][color=#0800] to enable iPass plugin[/color] $("input[type=password]").iPass(); $("input[name=pwdPrompt]").focus([color=#00ff]function[/color] () { $("input[name=pwdPrompt]").hide(); $("input[name=password-0]").show().focus(); }); $("input[name=password-0]").blur([color=#00ff]function[/color] () { [color=#00ff]if[/color] ($([color=#00ff]this[/color]).val() == "") { $("input[name=pwdPrompt]").show(); $("input[name=password-0]").hide(); } }); }); [url=][img]http://common.cnblogs.com/images/copycode.gif[/img][/url]
[font=Georgia,] [b]注意：[/b]这个必须写在document.ready 里，而不是写在js里。[/font]
[font=Georgia,]
主要还是通过隐藏和显示来控制显示,从而达到密码短暂显示和提示字体隐藏的功能。[/font]
[font=Georgia,]
[/font]
[align=center][size=18px]杰瑞教育原创博文，转载请注明出处。查看原文请到：[/size][url=http://www.cnblogs.com/jerehedu/][size=18px]杰瑞教育博客[/size][/url][size=18px][url=http://www.cnblogs.com/jerehedu/]园[/url][/size][/align]