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也能使用EXTJS视频演示
Dec 29 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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调用三种数据库的方法(2)
2006/10/09 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
利用vue.js插入dom节点的方法
2017/03/15 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python获取指定时间差的时间实例详解
2017/04/11 Python
python数据结构之链表详解
2017/09/12 Python
Python输出各行命令详解
2018/02/01 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
如何使用Python调整图像大小
2020/09/26 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
学生自我鉴定
2013/12/18 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
六年级作文之关于梦
2019/10/22 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript