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 相关文章推荐
javascript中字符串拼接需注意的问题
Jul 13 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
理解jquery事件冒泡
Jan 03 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
vue实现条件叠加搜索的解决方法
May 28 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
js实现二级联动简单实例
Jan 11 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之第三天
2006/10/09 PHP
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jQuery参数列表集合
2011/04/06 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
javascript实现连续赋值
2015/08/10 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python sys.path详细介绍
2013/10/17 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Hadoop中的Python框架的使用指南
2015/04/22 Python
Python中functools模块函数解析
2017/03/12 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
夫妻婚内购房协议书
2014/10/05 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
受资助学生感谢信
2015/01/21 职场文书
事业单位个人总结
2015/02/12 职场文书
贷款收入证明范本
2015/06/12 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书