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 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
php中给js数组赋值方法
Mar 10 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 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
ajax php 实现写入数据库
2009/09/02 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
JS中的作用域链
2017/03/01 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
python根据日期返回星期几的方法
2015/07/06 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Django中ORM表的创建和增删改查方法示例
2017/11/15 Python
深入理解Django的中间件middleware
2018/03/14 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Python实现的特征提取操作示例
2018/12/03 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
C#中的验证控件有几种
2014/03/08 面试题
大学生怎样写好自荐信
2014/02/25 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
倡议书作文
2015/01/19 职场文书
安全守法证明
2015/06/23 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python
python中redis包操作数据库的教程
2022/04/19 Python