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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 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
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jquery实现简单的banner轮播效果【实例】
2016/03/30 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
js初始化验证实例详解
2016/11/26 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
人力资源管理毕业生自荐信
2013/11/21 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS
浅谈Python数学建模之固定费用问题
2021/06/23 Python
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS