zepto點選檢視密碼明文效果程式碼例項
分享一段程式碼例項,它實現了點選按鈕檢視密碼明文的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript" src="js/zepto.min.js"></script> <script type="text/javascript"> $(function() { (function() { $.fn.showpassWord = function() { //檢視密碼 function Seepasswrod(elemnts) { this.elemnts = elemnts; this.init(); }; Seepasswrod.prototype = { init: function() { var m = this this.shouEvent(m); }, shouEvent: function(m) { m.elemnts.on("tap click", function() { var type = m.elemnts.parent().find(".passwords").attr("type"); if (type == "password") { m.elemnts.parent().find(".passwords").attr("type", "text"); } else if (type == "text") { m.elemnts.parent().find(".passwords").attr("type", "password"); } }); }, }; return this.each(function() { new Seepasswrod($(this)) }); }; })(Zepto); $(".seepassword").showpassWord(); }); </script> </head> <body> <div class="ui-password"> <input type="password" name="pw" class="passwords"> <button class="seepassword">檢視密碼</button> </div> </body> </html>
相關文章
- 點選實現顯示密碼效果程式碼例項密碼
- JavaScript點選投票效果程式碼例項JavaScript
- jQuery點選滑出層效果程式碼例項jQuery
- 密碼框提示文字效果程式碼例項密碼
- 密碼框輸入提示效果程式碼例項密碼
- input密碼輸入提示效果程式碼例項密碼
- 點選標題可以展開效果程式碼例項
- jQuery tab選項卡效果程式碼例項jQuery
- 阻止點選回車提交表單效果程式碼例項
- js點選div實現閃爍效果程式碼例項JS
- js點選文字框選中文字效果程式碼例項JS
- JavaScript多級選項卡效果程式碼例項JavaScript
- 明文顯示密碼效果詳解密碼
- 點選密碼框明文和密文顯示切換密碼
- 點選回車實現表單提交效果程式碼例項
- js點選按鈕數字加1效果程式碼例項JS
- js左右滑動選項卡效果程式碼例項JS
- jquery實現的選項卡效果例項程式碼jQuery
- 實現密碼框預設文字效果例項程式碼密碼
- canvas實現點選產生放射性效果程式碼例項Canvas
- 點選文字框彈出可檢索下拉選單程式碼例項
- select下拉選單項互換效果程式碼例項
- jQuery選項卡切換圖片效果程式碼例項jQuery
- js實現的垂直選項卡效果程式碼例項JS
- jQuery模擬支付寶密碼輸入效果程式碼例項jQuery密碼
- 點選連結<a>彈出確認視窗程式碼例項
- 移動端點選彈出提示視窗程式碼例項
- css進行中打點效果程式碼例項CSS
- jquery 驗證碼效果程式碼例項jQuery
- jQuery 動畫效果程式碼例項jQuery動畫
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS
- canvas火焰效果程式碼例項Canvas
- 點選返回上一頁程式碼例項
- 點選連結不跳轉例項程式碼
- jQuery點選回車事件程式碼例項jQuery事件
- 點選刪除表格行程式碼例項行程
- 密碼框提示文字程式碼例項密碼