JQuery插件开发之如何实时显示被隐藏的输入框密码

原文链接:http://www.gbtags.com/gb/share/5827.htm

我们前面曾经介绍过如何提高用户界面表单性能,同时我们也介绍过如何避免使用密码框来避免隐藏输入的密码,也讨论过隐藏密码显示对于用户体验将有多么糟糕。

基本上对于密码输入处理我们有如下俩个可选方式:

  1. 继续使用密码框控件,不考虑用户的操作体验
  2. 使用一般的输入框,不考虑用户密码的安全性

这就是为什么我们这里需要开发一个鼠标悬浮可显示密码的控件作为第三选择的原因,既可以提高安全,同时也可以大大满足用户体验

今天将讲解如何使用jQuery插件来完成上述功能,同时让大家了解更多jQuery插件开发,动态内容显示,及其代码开发的最佳实践。

这里我们将仿效一些移动设备的界面设计方式,我们将能看到最后一个输入的字符。废话不说,我们现在开始!

用户体验背景

在我们正式开发代码前,我们最好先了解为什么我们开发这些功能。这个功能完全是为了用户体验而设计的,并且是为了让用户体验能达到极致。

最初开始讨论屏蔽用户密码问题的人是Jakob Nielsen,在初在他的"停止使用密码屏蔽"文章中,他表达了对于密码屏蔽的观点。 有时候我们可能在一些可疑的人周围,他们正寻找一切可能的机会来获取我们的密码。但是有时候,我们则不需要应付这样糟糕的情况。

理想情况下我们需要能够同时应付最好的和最坏的场景。不管使用IE6还是chrome14.0.803.2Beta等浏览器。我们都希望能做的最好。

以上就是为什么我们不想让密码缺省就被设置为屏蔽的主要原因。实际上我们应该提供给我们用户一个更好的选择。

代码开发

我们需要做的是得到一个一般的密码控件,然后把它转化成文字,再在其上创建一个覆盖层,这个在你输入过程中会自动覆盖。使用这个方法你可以屏蔽任何内容而不用影响本身的输入内容。以下图片很好的解释了这一切:

现在我们开始正式编写代码。

我们首先开始一个基本的表单标签。很简单只有2个控件,一个有缺省的数值,另外一个是空白的,用来显示你需要的东西。

  1. <div id="container">
  1. <h1>Sign Up!</h1>
  1. <form action="#" method="get">
  1. <label>
  1. <span class="title">Old Password</span>
  1. <span class="desc">This is our awesome password field with default value. Try it out!</span>
  1. <input type="text" name="oldpassword" id="oldpassword" value="tHis1$myP4swrd." />
  1. </label>
  1. <label>
  1. <span class="title">Password</span>
  1. <span class="desc">This is our awesome blank password field. Try it out!</span>
  1. <input type="password" name="password" id="password" />
  1. </label>
  1. </form> </div>

然后我们调用jQuery和插件文件,如下:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
  1. // call jQuery from google!
  1. </script>
  1. <script type="text/javascript" src="jquery.hp.js">
  1. // call plugin </script>

以下我们创建我们基本的插件文件。你可以参考我们的jQuery Smooth Table of Contents Plugin,这里我们使用一个非常简单的结构:

  1. (function($) {
  1. $.fn.hoverpass = function(options) {
  1. //Our default options
  1. var defaults = {
  1. bullet: "&bull;",
  1. //which should be the "masking" character
  1. font: "‘Lucida Console‘, monospace",
  1. //please just use MONOSPACE fonts
  1. bg: "#fff",
  1. // background style for bullets
  1. free: "",
  1. // add your own additional styling here
  1. freeBul: "float: left; overflow: hidden;",
  1. // add your own additional styling for bullets here
  1. delay: 500, //how long it takes to create the bullet over the last character, in milliseconds
  1. delayHover: 3000, //how long it takes to hide again a hovered character
  1. animation: 500, //how long it takes the animation itself
  1. maxSize: 10 // maximum number of characters, to prevent bullets exploding input‘s size
  1. };
  1. //let‘s extend our plugin with default or user options when defined
  1. var options = $.extend(defaults, options);
  1. return this.each(function() {
  1. //our action goes here
  1. });
  1. };
  1. })
  1. (jQuery); 

以上我们定义了缺省的参数,接下来我解释一下:

  • bullet - 是我们用来屏蔽密码的符号。你可以使用任何符号或者HTML的符号定义来屏蔽密码
  • font - 这个非常重要,这个插件实现只能实现在monspaced字体上。因为其它类型字体,每一个字符都有它自己的长度,我们无法屏蔽。
  • bg - 如果你使用其他的输入框背景,那么你需要针对的在屏蔽层上也实现。因为屏蔽层会居于输入框之上。
  • free - 这里你添加margin用来处理你输入的padding问题。而且你可以用户来设置输入字体大小
  • maxsize - 这个对于密码框非常短的时候也非常重要。如果你不修改的话,你会得到多余的bullets而把输入内容挤开。

到这里你会有个基本插件,通过调用$(elem).hoverpass(),由第二行$.fn.hoverpass = function(){}定义。

修改输入类型到文本

我不确认你是否以前尝试过,但是这里我得告诉大家,你是不可以修改inputs的类型。这里可能是因为安全原因。看起来只有IE对此有担忧。不管怎样,我们要作的就是创建一个没有type属性的输入框克隆。这里有几个方法,我这里使用这个:

  1. return this.each(function()
  1. {
  1. //let‘s declare some variables, many as a "shortcut" for options
  1. var bullet = options.bullet,
  1. font = options.font,
  1. bg = options.bg,
  1. free = options.free,
  1. freeBul = options.freeBul,
  1. delay = options.delay,
  1. delayHover = options.delayHover,
  1. animation = options.animation,
  1. lastBul = "";
  1. //since we just can‘t change a field‘s type, we‘ll remove it and append a brand new text input on it‘s place
  1. var oldElement = $(this);
  1. // caching element, much better performance
  1. var inputHTML = ‘<input type="text" style="font-family: ‘+ font +‘; " />‘;
  1. //this is our basic input text, with our monopace font
  1. var input = oldElement.after(inputHTML).next();
  1. //appending our simple text field with our styling (font-family) AND caching it as var "input"
  1. /**** we are saying here: define the following variables: attr , i (zero), attrs (array with all oldElement attributes), l (size of attrs) while our counter (i) is smaller than attributes lenght (l) increase our counter and run this code */ for ( var attr, i=0 , attrs = oldElement[0].attributes , l =attrs.length ; i < l ; i++){
  1. attr = attrs.item(i)
  1. if (attr.nodeName != "type" && attr.nodeName != "style") {
  1. //well, we defined our type as text and font-style!
  1. input.attr( attr.nodeName, attr.nodeValue );
  1. }
  1. }
  1. oldElement.remove();
  1. // bye, bye input type="password"!
  1. });

创建屏蔽和Bullets

到这里,当你定义$(elem).hoverpass()时候,它会变成一个monospaced的文本输入框。非常酷吧?但是我们需要的不仅仅是这些。

现在我们将创建我们自己的Bullets容器。这俩行唯一有意思的地方是jQuery元素的再次缓存。你应该使用这个小技巧:

  1. // let the game begin var maskHTML = ‘<div class="hpMask" style="position:
  1. absolute; cursor: text; height: 1px; font-family: ‘ + font + ‘ ; ‘ + free + ‘ " />‘;
  1. //our container with his styling var maskContainer = input.before(maskHTML).prev();
  1. // appending our container for bullets with styling (font-family, free)

现在我们准备我们的bullets HTML,因为它将被使用几次,并且当我们有一个"数值"定义时添加一些bullets。

  1. var bulletHTML = "<span class=‘hpBullet‘ style=‘background: " + bg +
  1. "; " + freeBul + " ‘>"+ bullet + " </span> "; // our bullets HTML
  1. with styling (bg, freeBull)
  2. var countBullet = 0;
  1. // this is our counter, it is important to prevent
  1. our mask to get bigger / smaller than our input or its maximum size
  1. //since we use it from different places, it‘s better to add it via function
  2. function addBullet() {
  1. // add our last bullet, but hidden,
  1. and show anything that isn‘t last bullet
  1. lastBul = maskContainer.append(bulletHTML).find(":last-child").hide();
  1. maskContainer.find(":not(:last-child)").each( function(){
  1. $(this).show(); } );
  1. //start timer to show
  1. lastBul
  1. lastBul.delay(delay).fadeIn(animation);
  1. countBullet++; }

目前为止你可以又看到一个文本框,但如果你有一个value属性定义,你将看到很多bullets并且最后一个一妙后淡出。但是如果你输入,没有任何效果。

开始编写键盘输入

我们需要每次在密码框输入过程中添加bullets,并且在使用delete或者backspace键时删除一个bullet.

这里我们使用keypress, keyup和keydown来实现。

我们需要考虑一下使用keydown和keypress(因为它们很相似)我们绑定"按下按键",使用keyup绑定"释放按键。再仔细一点,你会发现在这个例子里,keydown/keypress将会在我们在字段内容有任何变化之前被调用,而keyup将会在任何变化发生后被调用。

这就是为什么我们使用keyup。我们必须查看控件内容并且看是否内容改变了大小,以此判断是否添加和删除bullets。这里因为我们需要照料到用户选择某一部分密码,或者在密码起始处按删除键,以及其它比较困难绑定行为的操作。

  1. //let‘s bind all keydown and create
  1. / remove our bullets ;
  1. we need do use keydown in order to detect special characters in non-gecko browsers input.keyup(
  1. function(event) {
  1. //check if something was really typed
  1. if (input[0].value.length > countBullet) {
  1. addBullet();
  1. } else { //ooops, delete or backspace?
  1. //then we check if something was really deleted
  1. while (input[0].value.length < countBullet) {
  1. maskContainer.find(":last-child").remove();
  1. countBullet--;
  1. }
  1. }
  1. } );

最后,鼠标悬浮显示密码

现在我们需要在用户鼠标悬浮时隐藏我们的bullet。看起来挺简单的?其实不然。

因为我们必须隐藏我们的bullet,但是我们不能丢失宽度,因为我们如果丢了,我们用户将看到仅仅密码最后一个字符(不是中间字符)。我们能做到的是将它淡出到一个不明显的透明(大概10%)然后将高度改为1px,这样我们还有宽度。

现在我们只需要使用elem.hover()就可以了吧?答案是否定的。因为我们有动态产生的内容,我们需要使用live()或者delegate()来绑定。我测试结果是delegate的效果更好,因此我们可以这样:

  1. //hide bullets based on a jquery object
  1. function hideBullets(object) {
  1. object.stop().css({ "height":
  1. "auto"}).animate({ opacity: 1 },
  1. animation).removeClass("hpHiddenBullet");
  1. }
  1. //hover function for our bullets
  1. maskContainer.delegate(".hpBullet", ‘hover‘,
  1. function(){
  1. var item = $(this);
  1. if  ( item.hasClass("hpHiddenBullet") != true ) {
  1. hideBullets( $(".hpHiddenBullet") );
  1. item.stop().addClass("hpHiddenBullet").animate( { opacity: 0.01},
  1. animation, function() { item.css({ "height": "1px"}); } );
  1. setTimeout( function() {
  1. if ( item.hasClass("hpHiddenBullet") == true ) {
  1. hideBullets( item );
  1. }
  1. }, delayHover);
  1. }
  1. }
  1. );

希望大家能喜欢这个效果,如果你有更好的实现,请和GBTAG分享。谢谢!

原文链接:http://www.gbtags.com/gb/share/5827.htm

时间: 2024-11-06 16:22:23

JQuery插件开发之如何实时显示被隐藏的输入框密码的相关文章

基于Jquery插件Uploadify实现实时显示进度条上传图片

网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考一下 先了解了解Uploadify,具体内容如下 Uploadify是一个简单易用的多文件上传方案.作为一个Jquery插件,Uploadify使用简单,并具有高度的定制性. Uploadify特性: Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 1).支

jquery实现的div的显示和隐藏效果

jquery实现的div的显示和隐藏效果:在网页的实际应用中,有些模块需要根据需要显示或者隐藏,下面就提供了几个这方面的实例,代码非常的简单,都是使用jquery自带的函数实现的,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>div隐藏显示效果</title> <style type="text/css&qu

JQuery采纳CSS实现DOM显示和隐藏要素

今天参加了Code Review活动.阅读编写代码的同事,感到满足当前功能的实现,但是从长远来看,,无论角度还是从代码重用是来看显然不佳维修点. 有什么需要看的权利.通过选择不同的选项下拉框需求,为了显示和隐藏的文本框.他的同事说: Code 1 <select name="select" onChange="disinput(this)"> <option value="1">1</option> <o

jquery html拼接标签的显示和隐藏

关于html 脚本的拼接,实现隐藏和显示. 本人对jQuery的理解不是很深刻,如果感觉说得有问题(或不清楚)的地方请更正. 因为对页面有时候比较复杂,我拿到数据以后的操作都需用js处理 html 的div table span 都是拼接出来的 如果想让脚步隐藏或显示,用经典的jQuery 的hide 和 show 方法不能实现,但是通过调试发现 如果样式修改就可以显示出来(或是隐藏),这时候jQuery 的css 就可以实现这个功能了. var tablestr='<br /><tab

jQuery 设置控件的显示与隐藏

//设置id为checkPwd显示的属性 $('#checkPwd').attr('show', 'show'); $('#checkPwd').attr('show', 'hide'); //设置id为checkPwd隐藏,显示 $('#euiPassword').hide(); $('#euiPasswordOne').show();

jQuery --下拉菜单的显示与隐藏

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style type="text/css"> 8 *{ 9 margin: 0px; 10 padding: 0px; 11 } 12 #nav{ 13 background-color: #EEE; 14 width

jQuery判断元素是否显示与隐藏

jQuery判断一个元素是显示还是隐藏,jQuery使用is()方法来判断一个元素是否显示,反之则为隐藏 核心代码 if($("#username").is(":hidden")){ } 实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test.html</ti

jQuery将物体居中,并且转换显示和隐藏

今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可以居中显示,第二次点击一次test消失,第三次点击又居中显示,这样循环下去: 具体js代码如下: 稍微解释一下代码的意思: 1.$('#test').get(0).flag = true;是为了建立一个标识,告诉浏览器什么时候应该显示,什么时候应该隐藏 2.上面的top就是让浏览器窗口的高度减去自己

jquery中使元素显示和隐藏方法之间的区别

在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方法之间的区别. 1.show()和hide() 使用hide()方法隐藏元素实际上是同时减少元素的高度.宽度以及不透明度,直到这三个属性为0,最后设置元素的css属性disolay:none.show()方法从上到下增大元素的高度,从左到右增大元素的宽度,同时增加内容的不透明度,直至元素完全显示.