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.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
基于jquery封装的一个js分页
Nov 15 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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错误和异长常处理总结
2014/03/06 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JavaScript学习笔记(一) js基本语法
2011/10/25 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery菜单插件用法实例
2015/07/25 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
Python判断两个对象相等的原理
2017/12/12 Python
Django开发中的日志输出的方法
2018/07/02 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
opencv实现简单人脸识别
2021/02/19 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
物流仓储实习自我鉴定
2013/09/25 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
教学评估实施方案
2014/03/16 职场文书
什么是就业协议书
2014/04/17 职场文书
演讲稿格式范文
2014/05/19 职场文书
标准版离职证明书
2014/09/12 职场文书
运动会加油稿100字
2014/09/19 职场文书
商务司机岗位职责
2015/04/10 职场文书
诚实守信主题班会
2015/08/13 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书