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 遍历json返回的map内容示例代码
Oct 29 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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
php单文件版在线代码编辑器
2015/03/12 PHP
PHP异常处理浅析
2015/05/12 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
2013/11/18 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
jQuery 动态云标签插件
2014/11/11 Javascript
JS继承用法实例分析
2015/02/05 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python是什么 Python的用处
2020/05/26 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
会计应聘求职信范文
2013/12/17 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript