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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
JavaScript实现随机点名小程序
Oct 29 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 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下的权限算法的实现
2007/04/28 PHP
PHP提取中文首字母
2008/04/09 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python实现类继承实例
2014/07/04 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
Python 12306抢火车票脚本
2018/02/07 Python
Python读写docx文件的方法
2018/05/08 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Python中Unittest框架的具体使用
2019/08/27 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
Python中return函数返回值实例用法
2020/11/19 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
英文商务邀请信
2014/01/22 职场文书
我的老师教学反思
2014/05/01 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书