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之折叠面板的深入解析
Jun 19 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
Jquery ajax基础教程
Nov 20 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
浅谈React高阶组件
Mar 28 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
JavaScript中document.activeELement焦点元素介绍
Nov 27 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
学习jquery之一
2007/04/27 Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
2008/08/05 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
删除节点的jquery代码
2014/01/13 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
Python计算一个文件里字数的方法
2015/06/15 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
Django框架实现的分页demo示例
2019/05/25 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python中的延迟绑定原理详解
2019/10/11 Python
python实现操作文件(文件夹)
2019/10/31 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
基于Django实现日志记录报错信息
2019/12/17 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
电气专业应届生求职信
2013/11/01 职场文书
自荐信范文
2013/12/10 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
文字自荐书范文
2014/02/10 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android