JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能示例
更新時(shí)間：2016年12月26日 11:16:20 作者：EthanQ
這篇文章主要介紹了JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能,涉及javascript針對(duì)頁(yè)面form表單元素動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能。分享給大家供大家參考，具體如下：
運(yùn)行效果圖如下：
完整實(shí)例代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form method="POST" action="" name="forms">
<span id=box><input type="password" name="password" size="80" style="width:150;" value="sina.com"></span>
<span id=click><a href="javascript:showps()">顯示密碼</a></span>
</form>
</body>
<script language="JavaScript">
function showps(){
if (this.forms.password.type="password") {
document.getElementById("box").innerHTML="<input type=\"text\" name=\"password\" size=\"80\" style='width:\"150\";' value="+this.forms.password.value+">";
document.getElementById("click").innerHTML="<a href=\"javascript:hideps()\">隱藏密碼</a>"
}
}
function hideps(){
if (this.forms.password.type="text") {
document.getElementById("box").innerHTML="<input type=\"password\" name=\"password\" size=\"80\" style='width:\"150\";' value="+this.forms.password.value+">";
document.getElementById("click").innerHTML="<a href=\"javascript:showps()\">顯示密碼</a>"
}
}
</script>
</html>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript表單(form)操作技巧大全》《JavaScript查找算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JavaScript實(shí)現(xiàn)密碼框輸入驗(yàn)證
- JS實(shí)現(xiàn)密碼框效果
- JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼
- js實(shí)現(xiàn)input密碼框顯示/隱藏功能
- 基于JS實(shí)現(xiàn)密碼框(password)中顯示文字提示功能代碼
- js實(shí)現(xiàn)input密碼框提示信息的方法(附html5實(shí)現(xiàn)方法)
- JavaScript實(shí)現(xiàn)輸入框(密碼框)出現(xiàn)提示語(yǔ)
- JavaScript如何實(shí)現(xiàn)在文本框(密碼框)輸入提示語(yǔ)
- JS實(shí)現(xiàn)密碼框根據(jù)焦點(diǎn)的獲取與失去控制文字的消失與顯示效果
- javascript 密碼框防止用戶粘貼和復(fù)制的實(shí)現(xiàn)代碼
- js正則實(shí)現(xiàn)的密碼框簡(jiǎn)單制作,還可以替換成自己想用得符號(hào)
- javascript解鎖前端密碼框常見功能做法
相關(guān)文章
Ajax實(shí)現(xiàn)郵箱驗(yàn)證實(shí)例代碼
這篇文章介紹了Ajax實(shí)現(xiàn)郵箱驗(yàn)證的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
XML+XSL 與 HTML 兩種方案的結(jié)合...2007-04-04
js 字符串轉(zhuǎn)化成數(shù)字的代碼，需要的朋友可以參考下。2011-06-06
微信小程序?qū)崿F(xiàn)短信登錄的實(shí)戰(zhàn)
項(xiàng)目要求增加短信登錄及人臉識(shí)別登錄功能，本文就來(lái)實(shí)現(xiàn)一下 短信登錄功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
基于Swiper實(shí)現(xiàn)移動(dòng)端頁(yè)面圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了基于Swiper實(shí)現(xiàn)移動(dòng)端頁(yè)面圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
javascript 函數(shù)式編程...2007-08-08
JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法,結(jié)合具體實(shí)例形式分析了javascript二叉樹記錄更新次數(shù)的原理與操作技巧,需要的朋友可以參考下2017-04-04
js自定義鼠標(biāo)右鍵的實(shí)現(xiàn)原理及源碼
這篇文章主要介紹了js自定義鼠標(biāo)右鍵的實(shí)現(xiàn)原理及源碼,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了Javascript三種字符串連接方式及性能比較，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07