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操作select下拉列表框的代码
Jun 04 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
node中的cookie的具体使用
Sep 13 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
原生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
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
mui上拉加载功能实例详解
2017/04/13 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
vue 页面跳转的实现方式
2021/01/12 Vue.js
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python实现apahce网站日志分析示例
2014/04/02 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python集合是否可变总结
2019/06/20 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
python编写猜数字小游戏
2019/10/06 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
自我推荐书
2013/12/04 职场文书
四年大学生活的个人自我评价
2013/12/11 职场文书
党支部审查意见
2015/06/02 职场文书
医生行业员工的辞职信
2019/06/24 职场文书