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 相关文章推荐
经典的带阴影的可拖动的浮动层
Jun 26 Javascript
cssQuery()的下载与使用方法
Jan 12 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
mailto的使用技巧分享
Dec 21 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
vue使用echarts实现水平柱形图实例
Sep 09 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
模仿OSO的论坛(四)
2006/10/09 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python实现年会抽奖程序
2019/01/22 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
python+opencv实现车道线检测
2021/02/19 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
安全生产活动月方案
2014/03/09 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
保送生自荐信范文
2015/03/26 职场文书
货款欠条范本
2015/07/03 职场文书
新闻稿件写作范文
2015/07/18 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
linux目录管理方法介绍
2022/06/01 Servers