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 相关文章推荐
优秀js开源框架-jQuery使用手册(1)
Mar 10 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
js实现彩色条纹滚动条效果
Mar 15 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
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
微信支付开发发货通知实例
2016/07/12 PHP
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
JS实现li标签的删除
2019/04/12 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python中partial()基础用法说明
2018/12/30 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
用python写PDF转换器的实现
2020/10/29 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
小学教师的个人自我鉴定
2013/10/24 职场文书
女大学生个人求职信
2013/12/09 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
高中历史教学反思
2016/02/19 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python