解决Shockwave flash在谷歌浏览器上崩溃的问题
現在很多注冊頁面都能顯示密碼強度，告訴用戶使用復雜度高的密碼。
現在有很多實現類似功能的js?；驹矶际?#xff1a;使用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、然后新建一個頁面，比如說注冊頁面?？梢暂斎胍韵麓a：
<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>
其他代碼保持不變。
總結
以上是生活随笔為你收集整理的解决Shockwave flash在谷歌浏览器上崩溃的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JeeWx_2.4.2 版本发布，免费开
- 下一篇： 谷歌浏览器(Chrome)遇到Flash