JS实现密码框的显示密码和隐藏密码功能示例


Posted in Javascript onDecember 26, 2016

本文实例讲述了JS实现密码框的显示密码和隐藏密码功能。分享给大家供大家参考,具体如下:

运行效果图如下:

JS实现密码框的显示密码和隐藏密码功能示例

完整实例代码:

<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>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
JavaScript prototype属性详解
Oct 25 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
原生JS下拉加载插件分享
Dec 26 #Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 #Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 #Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 #Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 #Javascript
jQuery实现动态添加tr到table的方法
Dec 26 #Javascript
浅谈JavaScript的计时器对象
Dec 26 #Javascript
You might like
虫族 Zerg 魔法科技
2020/03/14 星际争霸
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
PHP+mysql+Highcharts生成饼状图
2015/05/04 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
vue axios用法教程详解
2017/07/23 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书