文档章节

解决Shockwave flash在谷歌浏览器上崩溃的问题

AK_47
 AK_47
发布于 2016/03/30 22:50
字数 905
阅读 104
收藏 0

现在很多注册页面都能显示密码强度,告诉用户使用复杂度高的密码。

现在有很多实现类似功能的js。基本原理都是:使用js触发text表单输入元素的keyup事件,根据输入字符的长度以及类型数量(比如数字,小写字母,大写字母,特殊字符等)动态修改提示元素的样式和文本。

下面演示的passwordStrength插件是基于jQuery的。

下载:http://www.helloweba.com/demo/passStronger/jquery.passwordStrength.js

或者下载完整的demo:http://www.36ria.com/wp-content/uploads/2010/03/password_strength.zip

该插件使用一幅包含10个状态的图片显示密码强度。根据密码的输入,动态设置图片的垂直偏移量,达到切换不同状态的效果。

下面将该插件应用到asp.net应用程序中:

1、解压压缩包后,将password_strength.css文件放置到主题文件夹下(如果网站通过主题设置页面样式的话),否则,将该文件放置在css文件夹下。

该文件的样式定义如下:

.is0{background:url(../images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}

2、如果使用了主题,则在主题文件夹下创建一个images文件夹,然后将progressImg1.png文件放置在文件夹下。此时应该修改上面的第一行样式类iso的图片地址为:url(images/progressImg1.png),其他不变。

3、然后新建一个页面,比如说注册页面。可以输入以下代码:

<td align="left">
            <asp:TextBox runat ="server" ID="txtPwd" TextMode ="Password"></asp:TextBox>
            <img src="" id="imgPwd" alt=""/><span id="spanPwd" class="alertTip"></span>
            <div id="passwordStrengthDiv" class="is0"/>
            <p class="regTooltip">(必填)密码长度要在6-18位之间,只能由字符(a-z)、数字(0-9)和下划线(_)组成</p>
        </td>

注意上述代码的红色部分,id使用的是默认值,因为在js插件中,会默认查找该ID的元素(如下红色代码),并将状态图片显示在此。也可以修改,但要求js和页面要保持一致。

$.fn.passwordStrength.defaults = {
 classes : Array('is10','is20','is30','is40','is50','is60','is70','is80','is90','is100'),
 targetDiv : '#passwordStrengthDiv',
 cache : {}
}

4、然后在页面中引入jQuery库和插件,并编写如下代码:

<head runat="server">
    <title></title>
    <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.passwordStrength.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[id$=txtNewPwd]").passwordStrength();
        });
    </script>
</head>

注意密码框是服务器控件。

下图是演示效果:

 

 

扩展:上面的方法,页面初始加载时,图片默认显示。也可以修改让状态图片,在密码输入后才显示。

修改方法:

首先样式文件改成:

.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;}
.is10{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -7px;}
.is20{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -14px;}
.is30{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -21px;}
.is40{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -28px;}
.is50{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -35px;}
.is60{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -42px;}
.is70{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -49px;}
.is80{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -56px;}
.is90{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -63px;}
.is100{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -70px;}

然后,将显示状态的div中的class去掉:

<div id="passwordStrengthDiv"></div>

其他代码保持不变。

© 著作权归作者所有

AK_47
粉丝 16
博文 533
码字总数 569998
作品 0
嘉定
程序员
私信 提问
Chrom查看Flash缓存文件及Flash下载方法

比如在优酷看视频时,或者熊猫直播,如果使用Flash进行播放的基本都会先缓存在本地,只不过这个缓存的名字后缀不叫flv,而是类似tmp这样;通常只要找到这个缓存文件,然后改为flv即可播放;如...

easonjim
2017/05/03
0
0
Fix chrome 下flash crash的问题

本来好好的,结果不知道为什么,在MAC下使用chrome不断出现flash插件的错误,网上搜了一下,看[这里][1],要把chrome自带的flash插件注释掉。重启chrome好象是没什么问题了。不过,原生的fla...

limodou
2014/04/19
153
0
CodeIgniter + uploadify 在 IE 下会话丢失问题的解决方案

最近需要学习并用CodeIgniter框架对一个项目进行二次开发,由于之前一直都是使用Symfony做项目,所以再换到CodeIgniter项目上还是比较顺畅的。不过相比较之下,感觉CodeIgniter比Symfony要轻...

random123
2014/06/23
187
0
解决Ubuntu 12.04下频繁死机-Chrome

1、现象 当ubuntu出12.04(64bit)时我决定重装为12.04这个版本。装完后在2个月时间里经常出现Ubuntu死机的情况。尤其是在用chrome浏览网页时,拖动右侧的滚动条。先是页面死,1-2s后鼠标和输入...

NoahX
2012/07/05
13.4K
8
Chrome 34 正式版小幅升级

Chrome 34今天迎来了又一次小幅升级,版本号升级为Chrome 34.0.1847.137。Windows、Linux、Mac用户都可以下载最新版,现有Chrome用户可以获取自动更新。 Chrome 34.0.1847.137只是Chrome 34...

oschina
2014/05/15
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
6
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
1K
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部