點選實現顯示密碼效果程式碼例項
本章節分享一段程式碼例項,它實現了點選一個核取方塊顯示密碼的功能。
這樣的效果在很多網站都是具有的,比較人性化。
當然這裡只是一個很簡單的例子,只是用來介紹一下這種效果是如何實現的。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #txt { display:none; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#ck").click(function () { if ($("#ck").prop("checked")) { $("#pw").hide(); $("#txt").val($("#pw").val()); $("#txt").show(); } else { $("#pw").show(); $("#txt").hide(); } }) }) </script> </head> <body> <input type="password" value="softwhy.com" id="pw"/> <input type="text" id="txt"/> <input type="checkbox" id="ck"/> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).$(document).ready(function () {}),當文件結構完全載入完畢再去執行函式中的程式碼。
(2).$("#ck").click(function () {}),為核取方塊註冊click事件處理函式。
(3).if ($("#ck").prop("checked")) {},判斷核取方塊是否處於選中狀態。
(4).$("#pw").hide(),隱藏密碼框。
(5).$("#txt").val($("#pw").val()),將密碼框的值設定為文字框的值。
(6).$("#txt").show(),顯示文字框。
二.相關閱讀:
(1).prop()可以參閱jQuery prop()一章節。
(2).val()可以參閱jQuery val()一章節。
相關文章
- zepto點選檢視密碼明文效果程式碼例項密碼
- js點選div實現閃爍效果程式碼例項JS
- jQuery點選顯示彈出層例項程式碼jQuery
- 點選回車實現表單提交效果程式碼例項
- jquery實現的選項卡效果例項程式碼jQuery
- JavaScript點選投票效果程式碼例項JavaScript
- 實現密碼框預設文字效果例項程式碼密碼
- canvas實現點選產生放射性效果程式碼例項Canvas
- js實現的垂直選項卡效果程式碼例項JS
- css優化文字顯示效果程式碼例項CSS優化
- jQuery點選滑出層效果程式碼例項jQuery
- 點選按鈕顯示或者隱藏元素例項程式碼
- js實現關鍵詞高亮顯示程式碼例項JS
- jquery實現的點選進行倒數計時效果程式碼例項jQuery
- 物件導向實現的tab選項卡效果程式碼例項物件
- 點選實現隱藏元素本身程式碼例項
- 密碼框提示文字效果程式碼例項密碼
- 密碼框輸入提示效果程式碼例項密碼
- input密碼輸入提示效果程式碼例項密碼
- 點選標題可以展開效果程式碼例項
- canvas實現的驗證碼效果程式碼例項Canvas
- javascript實現animate()動畫效果程式碼例項JavaScript動畫
- css實現矩形切角效果程式碼例項CSS
- javascript實時顯示時間程式碼例項JavaScript
- jQuery tab選項卡效果程式碼例項jQuery
- jQuery模擬實現滑鼠點選事件程式碼例項jQuery事件
- 阻止點選回車提交表單效果程式碼例項
- 純CSS實現的二級下拉選單效果程式碼例項CSS
- 利用canvas實現的驗證碼效果程式碼例項Canvas
- js點選文字框選中文字效果程式碼例項JS
- JavaScript多級選項卡效果程式碼例項JavaScript
- jquery實現的分頁效果例項程式碼jQuery
- css實現圖片灰度效果程式碼例項CSS
- javascript模擬實現ArrayList效果程式碼例項JavaScript
- canvas實現煙花燃放效果程式碼例項Canvas
- 滑鼠懸浮實現翻牌效果程式碼例項
- js實現刮刮樂抽獎效果程式碼例項JS
- canvas實現的鋸齒效果程式碼例項Canvas