标题:
JQuery实现密码有短暂的显示过程和实现input hint效果
[打印本页]
作者:
qdjianghao
时间:
2015-1-13 10:58
标题:
JQuery实现密码有短暂的显示过程和实现input hint效果
一、实现目的
这几天做项目的时候，客户要求在文本框输入密码的时候，要求密码有短暂的显示过程，如下图：
二、问题思考
首先解决的是如何在input框里实现类似于android中hint属性，html5中添加placeholder，但是现在不是html5，怎么办？一开看一下杰瑞教育的小伙伴是怎么处理的！
三、解决办法
1.输入用户名
<</SPAN>
li
> <</SPAN>
input
name
="textfield"
type
="text"
id
="usern"
value
="请输入您的用户名"
class
="input userName inputholder" /> </</SPAN>
li
>
写一个JS：
[url=]
[/url]
$.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() }) }; [url=]
[/url]
当输入框获得焦点的时候，将这个值清空，当丢失焦点的时候，再将之前已经存好的值付给输入框。
2.输入密码短暂显示
从网上找到了一个Js库，下载请到杰瑞教育百度云盘：
IPass.packed.js
密码的input如下：
<</SPAN>
li
> <</SPAN>
input
name
="pwdPrompt"
type
="text"
id
="textfield2"
value
="请输入您的密码"
class
="input passWord inputholder"/> <</SPAN>
input
name
="pwd"
type
="password"
id
="password"
class
="input passWord hide" /> </</SPAN>
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里加入：
[url=]
[/url]
$(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(); } }); }); [url=]
[/url]
注意：
这个必须写在document.ready 里，而不是写在js里。
主要还是通过隐藏和显示来控制显示,从而达到密码短暂显示和提示字体隐藏的功能。
杰瑞教育原创博文，转载请注明出处。查看原文请到：
杰瑞教育博客
园
欢迎光临 编程开发论坛 (http://bbs.lihuasoft.net/)
Powered by Discuz! 6.0.0
[/url][/url]
[/url][/url]